Chenxin YanC
Convex Community•3mo ago•
8 replies
Chenxin Yan

How to use preload query with authentication

I am referring to this documentation

Here are the components:
import { getAuthToken } from "@/lib/convex";
import { api } from "@dev-team-fall-25/server/convex/_generated/api";
import { preloadQuery } from "convex/nextjs";
import { ScheduleContent } from "./components/schedule-content";

const SchedulePage = async () => {
  const token = await getAuthToken();
  const preloadedClasses = await preloadQuery(
    api.userCourseOfferings.getUserCourseOfferings,
    {},
    { token },
  );

  return <ScheduleContent preloadedClasses={preloadedClasses} />;
};

export default SchedulePage;


"use client";

import { api } from "@dev-team-fall-25/server/convex/_generated/api";
import { Preloaded, usePreloadedQuery } from "convex/react";
import { ScheduleCalendar } from "./schedule-calendar";

interface ScheduleContentProps {
  preloadedClasses: Preloaded<
    typeof api.userCourseOfferings.getUserCourseOfferings
  >;
}

export function ScheduleContent({ preloadedClasses }: ScheduleContentProps) {
  const classes = usePreloadedQuery(preloadedClasses);

  return <ScheduleCalendar classes={classes} />;
}


When loading the schedule page, I got this Not Authenticted error. The reason is that when usePreloadedQuery is launched, the auth token is not loaded yet. I have to create another client side component that wraps the schedule content in <Authenticated/>, however, this lead to the entire page to wait til the auth token to be loaded. Is there a way to skip the usePreloadedQuery like the way you can skip useQuery or other alternative?
Next.js Server Rendering | Convex Developer Hub
Implement server-side rendering with Convex in Next.js App Router using preloadQuery, fetchQuery, and server actions for improved performance.
Next.js Server Rendering | Convex Developer Hub
Was this page helpful?