Querying Data in the Server to Show in Metadata

[gritty spindle]

import type { Metadata } from 'next';

import { Id } from '@/convex/_generated/dataModel';
import { fetchQuery } from 'convex/nextjs';

import { api } from '../../../../../convex/_generated/api';
import ProjectWrapper from './project-wrapper';

type Props = {
  params: { planId: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  // read route params
  const id = params.planId;
  const plan = await fetchQuery(api.plans.queries.getUserPlan, {
    planId: id as Id<'plans'>,
  });

  const projectName = plan?.projectName;
  console.log(plan);

  return {
    title: projectName,
  };
}

export default function PlanLayout({ children }: { children: ReactNode }) {
  return <ProjectWrapper>{children}</ProjectWrapper>;
}

im trying to query data in Convex in Next.js layout not sure if im doing it correctly
I want to pass the projectName to the Metadata to show in the browser title

but right now all im getting is null for plan, not sure if im using fetchQuery correctly

[icy shell]

Are you using auth in the query? If yes you need to pass in the token explicitly:

(assuming you're using Clerk)

const token = await auth().getToken("convex")
await fetchQuery(api.plans.queries.getUserPlan, {
    planId: id as Id<'plans'>,
  }, {token});

[gritty spindle]

Hey @icy shell when i do that i get this

[untold gyro]

@gritty spindle I think it's getToken({ template: "convex" }, what are the args that getToken accepts?

yeah