SSR / hydration - why useQuery makes a request instead of using the cache?

[moroshko]

I'm using react-query in a server-rendered Next.js page.

Why does the client call fetchHello? I expect the client to use the cached (hydrated) name.

What am I missing here?

pages/index.tsx

const Home: NextPage = () => {
  const helloInfo = useHello();

  return <h1>Hello {helloInfo.data?.name}</h1>;
};

export const getServerSideProps: GetServerSideProps = async () => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery("hello", fetchHello);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
};

lib/hooks/useHello.ts

export const fetchHello = async (): Promise<HelloResponse> => {
  console.log("fetchHello is called");

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: "John Doe",
      });
    }, 1000);
  });
};

export const useHello = () => {
  return useQuery<HelloResponse>("hello", fetchHello);
};

_app.tsx

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  );
}

Full source code is available here: https://github.com/moroshko/react-query-hydration

[TkDodo]

it does use the hydrated name, but it gives you a background refetch because staleTime defaults to zero. That is documented here: https://react-query.tanstack.com/guides/ssr#staleness-is-measured-from-when-the-query-was-fetched-on-the-server