Can't get cache working on Next.js

[hkrawczyk]

On my page I want to display public investments.

I'm using hydration and I'd like to cache this request for like 3h or so. So I'm modifying data in DB to see if I get old results or new ones, but I always get new ones. Therefore, it seems like it is never cached.
Could you please advise?

_app.js

const queryClient = new QueryClient();

export default function App({ Component, pageProps: { session, ...pageProps } }) {
    const renderWithLayout =
        Component.getLayout ||
        function (page) {
            return <Layout>{page}</Layout>;
        };

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

page.js

export const getServerSideProps = async() => {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery({
        queryKey: ["publicInvestment"],
        queryFn: fetchPublicInvestments,
        cacheTime: 180 * 60 * 1000,
        staleTime: 90 * 60 * 1000
    })
    return {
        props: {
            dehydratedState: dehydrate(queryClient)
        }
    }
}



export default function InvestmentsPublic() {
    const { isLoading, data, isError } = useQuery({
            queryKey: ["publicInvestment"],
            queryFn: fetchPublicInvestments,
            cacheTime: 180 * 60 * 1000,
            staleTime: 90 * 60 * 1000,
            refetchOnMount: false,
            refetchOnWindowFocus: false,
        }
    );
}

I'm probably doing some random mistake but I've read the documentation and defaults and still can't get it to work...

[TkDodo]

1. if you prefetch data on the server, it will always run, because you create a new QueryClient() in getServerSideProps. The queryClient holds the cache, and a new client means an empty cache. So passing staleTime there is likely irrelevant. So the caching will work, but only on the client. If you prefetch on the server, every request will refetch. The only way to also cache that would be to setup server-side caching, e.g. with redis, and maybe use the persisters to write to there. That is simply because the react-query cache is an in-memory cache. You can theoretically create the QueryClient outside of getServerSideProps, but then it will be shared between users and requests, and it's basically in-memory of your server. That might or might not work, depending on your deployment scenario.

2. in _app.js, you'd want to create the QueryClient in state or an instance ref as shown in the docs to avoid sharing data between users

[hkrawczyk]

Thank you, that solved the issue!

[synasapmob]

@TkDodo but then it will be shared between users and requests Sorry but I don't understand your answer, can you explain again??

[pjborowiecki]

@TkDodo Thank you for this explanation. I was wondering if you could please advice a bit further, as it's really hard to find good examples of combining TanStack Query with server components. Would it make sense to do something like this in Next.js?

const UsersPage: UsersPage = async ({ ...props }) => {
  const searchParams = await props.params;
  const queryClient = getQueryClient();

  const limit = searchParams?.limit ? Number(searchParams?.limit) : 20;

  await queryClient.prefetchQuery({
    queryKey: ["USERS"],
    queryFn: () => selectAllUsers_server_cached_next({ limit }),
    staleTime: Number.POSITIVE_INFINITY,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <UsersTable />
    </HydrationBoundary>
  );
};

When the queryFunction is cached server-side using new Next.js's caching:

async function selectAllUsers_server_cached_next({
  query,
  limit = 10,
  offset = 0,
}: {
  query?: string;
  limit?: number;
  offset?: number;
}): Promise<User["select"][]> {

  "use cache";
  unstable_cacheTag("USERS");

  const { success, error } = genericQuerySchema.safeParse({ query, limit, offset });
  if (error) logger.error("selectAllUsers", error);
  
  return success ? db.query.user.findMany({
    where: query ? like(user.name, `%${query}%`) : undefined,
    limit,
    offset,
  }) : []
}

And then data is consumed in some client component (UsersTable for example):

type UsersTable = (props: Readonly<React.ComponentPropsWithoutRef<"div">>) => React.JSX.Element;

const UsersTable: UsersTable = () => {
  const { data } = useQuery({
    queryKey: [CONSTANTS.cacheTags.users],
    queryFn: () => selectAllUsers_server_cached_next({}),
    staleTime: Number.POSITIVE_INFINITY,
  });

  console.log("DATA: ", data);

  return <div>test</div>;
};

export { UsersTable };

My main question is whether it makes any sense to combine the two or should I use one or the other? Also, how best to handle url search params in such scenario - should I be passing them as props or is there a better way of making them available where I am calling useQuery() ?

I would truly appreciate your advice. Thank you!