Hosna Qasmei
Hosna Qasmei•13mo 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 Qasmei
Hosna QasmeiOP•13mo 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
Michal Srb•13mo 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 Qasmei
Hosna QasmeiOP•13mo ago
Hey @Michal Srb when i do that i get this
No description
ballingt
ballingt•13mo ago
@Hosna Qasmei I think it's getToken({ template: "convex" }, what are the args that getToken accepts?
ballingt
ballingt•13mo ago
yeah
No description
Hosna Qasmei
Hosna QasmeiOP•13mo ago
Yes that worked! Thank you @ballingt and @Michal Srb 😄

Did you find this page helpful?