sbklS
Convex Community•2y ago•
6 replies
sbkl

preloadQuery for server side rendering getting the client component error

I want to preload my query with a server component and get this error

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

I followed the documentation here:
https://docs.convex.dev/client/react/nextjs/server-rendering

When commenting out the preloadQuery, the page renders properly, so I assume the error can only come from this. Also, the token is properly retrieved from clerck.

Below the code:

app/collections/page.tsx
import { preloadQuery } from "convex/nextjs";
import { api } from "@capacity/api";
import { getAuthToken } from "@/lib/auth";

export default async function Page() {
  const token = await getAuthToken();
  const preloadedCollections = await preloadQuery(
    api.collections.list,
    {},
    {
      token,
    },
  );
  return <main>{token}</main>;
}

lib/auth.ts
import { auth } from "@clerk/nextjs/server";

export async function getAuthToken() {
  return (await auth().getToken({ template: "convex" })) ?? undefined;
}
Next.js Server Rendering | Convex Developer Hub
Next.js automatically renders both Client and Server Components on the server
Next.js Server Rendering | Convex Developer Hub
Was this page helpful?