$titleId.tsx

import { api } from "@netflix-comments/backend/convex/_generated/api";
import { createFileRoute, notFound } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { ConvexHttpClient } from "convex/browser"; //This import itself makes it a little sus since the package seems to be build for browser (client)
import z from "zod";
const convex = new ConvexHttpClient(process.env.CONVEX_URL as string);

const validatesTitle = createServerFn()
  .validator(
    z.object({
      titleId: z.string().length(8),
    })
  )
  .handler(async (params) => {
    const titleId = params.data.titleId;
    const data = await convex.action(api.titles.getOrFetchTitle, {
      netflixId: titleId,
    });
    if (!data) {
      throw notFound();
    }
    return data;
  });
export const Route = createFileRoute("/title/$titleId")({
  component: RouteComponent,
  beforeLoad: ({ params }) =>
    validatesTitle({
      data: {
        titleId: params.titleId,
      },
    }),
  loader: (ctx) => {
    return ctx.context;
  },
});