Client fetches query although the server already prefetched it

[JessedeJonge]

I closely followed the setup as described here: https://supabase-cache-helpers.vercel.app/postgrest/ssr/react-query

I have the following function in a lib dir:

export const getCompanyById = (client: TypedSupabaseClient, id: number) => {
  console.log(
    `getCompanyById called from ${typeof window === "undefined" ? "server" : "client"} for id: ${id}`
  );
  return client
    .from("companies")
    .select("id, name")
    .eq("id", id)
    .throwOnError()
    .single();
};

I do this in my page.tsx:

export default async function DashboardPage() {
  const supabase = createClient();
  const queryClient = new QueryClient();
  const { companyID } = await useUser(supabase);
  await prefetchQuery(queryClient, getCompanyById(supabase, companyID));
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Suspense fallback={<DashboardSkeleton />}>
        <DashboardContent />
      </Suspense>
    </HydrationBoundary>
  );
}

and have this in my dashboard content view:

  const { data: company, isLoading: isLoadingCompany } = useQuery(
    getCompanyById(supabase, companyID)
  );

Even with this setup, I can see the client still calling for companies even though the server prefetched them. This is my provider:

"use client";

import { useState } from "react";
import {
  isServer,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
//TODO: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#initial-setup

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
      },
    },
  });
}
let browserQueryClient: QueryClient | undefined = undefined;

function getQueryClient() {
  if (isServer) {
    return makeQueryClient();
  } else {
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}
export const ReactQueryClientProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const queryClient = getQueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      {children}
    </QueryClientProvider>
  );
};

Is there anything I am missing here?

[psteinroe]

Hey! Does the same happen with just react query?