Why does prefetchQuery not work when using a Next.js API route as queryFn? (or something wrong?)

[leehj322]

Hi, I’ve run into an issue when using prefetchQuery in a Next.js App Router project with @tanstack/react-query.

I have the following API route at /app/api/user/route.ts:

import { createClient } from "@/lib/supabase/server";
import { NextResponse } from "next/server";

export async function GET() {
  const supabase = await createClient();

  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    return NextResponse.json({ user: null, profile: null });
  }

  const { data: profile } = await supabase
    .from("profiles")
    .select("*")
    .eq("id", user.id)
    .single();

  return NextResponse.json({
    user,
    profile,
  });
}

Then I created a shared query function like this:

export const getUser = async () => {
  const res = await fetch("/api/user");
  return res.json();
};

This works perfectly with useQuery on the client side:

useQuery({
  queryKey: ["user"],
  queryFn: getUser,
});

However, when I try to use the same function with prefetchQuery on the server side, like this:

const queryClient = new QueryClient();

await queryClient.prefetchQuery({
  queryKey: ["user"],
  queryFn: getUser,
  staleTime: 1000 * 60,
});

…it doesn't seem to actually prefetch anything.

---

But — if I change the query function to call Supabase directly (bypassing the API route), it works:

await queryClient.prefetchQuery({
  queryKey: ["user"],
  queryFn: async () => {
    const supabase = await createClient();
    const {
      data: { user },
    } = await supabase.auth.getUser();

    if (!user) return { user: null, profile: null };

    const { data: profile } = await supabase
      .from("profiles")
      .select("*")
      .eq("id", user.id)
      .single();

    return { user, profile };
  },
  staleTime: 1000 * 60,
});

So I'm wondering:

❓ Why doesn't prefetchQuery work when the queryFn calls a Next.js API route (like /api/user)?

Is it because the fetch call is treated as client-side? Or is there something else I’m missing about the behavior of prefetchQuery in a server context?

I couldn’t find any clear explanation in the docs or discussions, so any insights would be greatly appreciated!

Thanks 🙏

[TkDodo]

does it work if you call the api route directly in the server component?

const user = await getUser()

if that works, then it should work with prefetchQuery too. If that doesn’t work, well, then there’s your answer and API routes can’t be invoked from server components.

also: https://nextjs-faq.com/fetch-api-in-rsc

[leehj322]

Thanks for pointing that out and for sharing the link! I didn’t realize using a Next.js API route inside an RSC (React Server Component) was a misuse — that definitely clears things up.