Hosna Qasmei•8mo ago

Querying Data in the Server to Show in Metadata

import React, { ReactNode } from 'react';

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>;
}

import React, { ReactNode } from 'react';

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>;
}

6 Replies

Hosna QasmeiOP•8mo ago

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

Michal Srb•8mo ago

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});

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

Hosna QasmeiOP•8mo ago

Hey @Michal Srb when i do that i get this

ballingt•8mo ago

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

ballingt•8mo ago

yeah

Hosna QasmeiOP•8mo ago

Yes that worked! Thank you @ballingt and @Michal Srb 😄

Querying Data in the Server to Show in Metadata

Did you find this page helpful?