Sharing the query client to non-React functions

[patik]

I'm trying to make the queryClient available to all of the project's code, not just React components and hooks. I thought I could just export it from a file, but I'm getting mixed messages from the docs. For background, the project is a Next.js app with the pages router, but I'm starting to migrate to the app router with SSR.

The Advanced SSR guide suggests exporting a getQueryClient() function that returns the query client, which sounds good to me.

However, the Server Rendering & Hydration guide seems to disagree with this. In a code comment, it says "Creating the queryClient at the file root level makes the cache shared between all requests and means all data gets passed to all users. Besides being bad for performance, this also leaks any sensitive data." First, I don't understand how the data can be passed to all users when it's running in the browser. Second, how is it bad for performance?

Which is the correct method for accessing the query client from non-React functions in the browser?

[TkDodo]

The “Server Rendering & Hydration” guide comes first. It explains general principles, and one of them is: Don’t create a new QueryClient as a const outside of the component, because it will be shared between requests. It’s not about the browser, but about the server. With SSR, your code is isomorphic and runs in both environments. So create it in useState or an instance ref inside the component, as the guide shows: const [queryClient] = React.useState(...)

The Advanced SSR guide specifically focuses on nextJs and streaming in the app directory. Because of how nextJs creates a global suspense fallback (loading.tsx), whatever code we write could be below that suspense boundary, which means the queryClient we hold in state could be thrown away. That’s why we recommended a getQuerClient function. If you take a look at the implementation, you will see that it shares a queryClient over the browser window for browser environments, but will create a new one for every invocation on the server by calling makeQueryClient().

So, there is no disagreeing between the two - they just cover different use-cases.

[ollisal]

For anybody reading this looking for a way to satisfy both concernrs:

1. keep your QueryClient specific to each SSR request
2. still use the same one for everything during that request (Even outside the React components)

you might want to put your server-side QueryClient inside an AsyncLocalStorage: https://nodejs.org/api/async_context.html. And run() your whole SSR page rendering process with that same client, then you can access the correct query client anywhere using getStore().