0

I have the basic setup of server-side rendering with react-query setup and it works as expected. I know that react-query maintains a cache on the client side from which it can server data if the particular query key is fresh and it exists. This setup looks like this -

// pages/_app.tsx

import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider, Hydrate } from "react-query";

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

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

export default MyApp;
// pages/index.tsx

import React from "react";
import { GetServerSideProps, NextPage } from "next";
import { dehydrate } from "react-query";
import { useQuery } from "react-query";
import { exampleApi } from "@src/modules/my-plans/apis";

const ListingPage: NextPage = () => {
    const { data: list, isLoading } = useQuery(["list-api-key"], exampleApi);

    return (
        <main>
            {...}
        </main>
    );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
    const queryClient = new QueryClient();
    await queryClient.prefetchQuery(["list-api-key"], exampleApi);

    return {
        props: {
            dehydratedState: dehydrate(queryClientTopDog)
        }
    };
};

export default ListingPage;

In the above snippet, since the API is prefetched in getServerSideProps, useQuery fetches the data from the hydrated cache instead of calling the API.

What I am trying to figure out is if caching in getServerSideProps is possible. Since the API has been called once, how can I make it so that from the second request on, instead of calling the API again it fetches data from a server-side cache similar to how react-query maintains a client-side cache?

If I am not misunderstanding this page in the docs, it seem to indicate that it is possible to maintain a server-side cache but I am unable to figure out how to do it. For this I have tried creating a QueryClient on pages/_app.tsx and exported it to use in getServerSideProps but I am not able to get it to work.

1
  • learn more on caching in Next.js here Commented Aug 10, 2022 at 15:27

1 Answer 1

0

You need to declare the client outside the getServerSideProps function.

Also you need to configuge the staleTime as by defalt it is 0.

const queryClient = new QueryClient();

export const getServerSideProps: GetServerSideProps = async (context) => {
    
    await queryClient.prefetchQuery(["list-api-key"], exampleApi, { staleTime: STALE_TIME });
    return {
        props: {
            dehydratedState: dehydrate(queryClientTopDog)
        }
    };
};

export default ListingPage;

2
  • Interesting. This does not seem to be documented. I tested it and it works by keeping the queryClient instance outside of the getServerSideProps function. However more interesting is then how you would be able to invalidate the queries which do just exist serverside. Have you testet this as well? I opened a ticket regarding this issue here: github.com/TanStack/query/discussions/4271
    – mogio
    Commented Oct 5, 2022 at 12:43
  • I have tested it but could not invalidate the cache as well. Looks like it is a permanent cache until you restart the server. As they say in the discussion from your link above queryClient does not remove the data, it only marks it as stale for useQuery hook. Commented Oct 7, 2022 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.