Why is react-query in Next.js so hard to setup ? useState vs normal variable ?
Unanswered
Silver carp posted this in #help-forum
Silver carpOP
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
2. As Normal Variable
The official docs say that I need to use it with
My questoion is how is that even possible if the provider.tsx file has
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 ?
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 ?
2 Replies
“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
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.That you app is “fully CSR” is not entirely true tho, Next.js makes optimizations for you out of the box, one of them is pre-rendering client components (“use client”) on the server to deliver a quick first page load instead of a blank screen.
So, unless you’re lazily or dynamically loading (
So, unless you’re lazily or dynamically loading (
dynamic()
from Next.js API) your components, they’re pre-rendered on the server.