Why is react-query in Next.js so hard to setup ? useState vs normal variable ?

Question

I have gone throught a lot of the official docs for Tanstack Query/React Query and many youtube tutorials and its so confusing on how to actualy set up react query properly.From what I know there are two ways to set it up:

1. With useState

"use client";
...
export function Providers({ children }: { children: React.ReactNode }) {
    const [queryClient] = useState(() => new QueryClient());

    return (
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
            <QueryClientProvider client={queryClient}>
                {children}
            </QueryClientProvider>
        </AppRouterCacheProvider>
    );
}

2. As Normal Variable

"use client";
...
export function Providers({ children }: { children: React.ReactNode }) {
    const queryClient = new QueryClient();

    return (
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
            <QueryClientProvider client={queryClient}>
                {children}
            </QueryClientProvider>
        </AppRouterCacheProvider>
    );
}

The official docs say that I need to use it with useState because if I don't, I will have a shared queryClient accross all users and may end up leaking sensitive info.

My questoion is how is that even possible if the provider.tsx file has "use client" ? Since it is a client component, why would there server ever share this variables with all it users ? And since <QueryClientProvider> has to be declared in a client component, whats the need for useState ?

Also my entire app behind the login is CSR, so I wont ever be using ReactQuery in a server component. So please help me. What is the correct way ?

LuisLl · Answer

“use client” components also run on the server for the first page load, if you instantiate the QueryClient as a regular const variable, outside the scope of the component, this instance “might” be unintentionally shared across multiple users.

In the other hand, when you instantiate the QueryClient inside useState you create an isolated and new instance when the component runs for the first time, doesn’t matter if it on the server first, because state is stored and managed by react, the instance created on the first pass on the server will be the same as the one the user gets on the client, and its guaranteed to be one different for each time the component gets mounted.

Why is react-query in Next.js so hard to setup ? useState vs normal variable ?

2 Replies