useQuery vs new QueryClient inside Context

[Zerebokep]

I was wondering if I can use useQuery inside a react context or are there any side-effects? I remember that I've read somewhere that it could lead to bugs, but not sure what the reason was.

Also it seems automatic refetching (refetchInterval) does not work inside a context when using new QueryClient().

[TkDodo]

What does "inside context" mean? Can you show an example?

[TkDodo]

// useQuery() or new QueryClient()?

useQuery and new QueryClient() are two very different things. My guess is you want useQuery here, why would you do new QueryClient() ? What do you expect this to achieve?

[Zerebokep]

I was just wondering if useQuery is safe to use inside a context, because it uses (from my understanding) an existing queryclient, while new QueryClient().fetchQuery() doesn't.

[TkDodo]

1. Your AuthProvider is a normal, standard functional component. It doesn't really matter that it renders a context or not, that doesn't make react-query be "inside a context". I find that viewpoint of "inside a context" quite confusing tbh.

2. Inside a functional component, you can call useQuery, and yes, it expects to have the QueryClientProvider in the tree above it.

3. you cannot call new QueryClient().fetchQuery() during render, because it fires an api request and returns a promise. new QueryClient() also creates a new cache, so there's not caching if you do that. There are not examples or docs about calling new QueryClient().fetchQuery apart from SSR.

---

// useQuery() or new QueryClient()?

so the answer is: useQuery.

[Zerebokep]

I see, thanks. I'm quite new to react, so please excuse the dumb questions. I currently also use fetchQuery inside callbacks like useEffect or zod js validation schemes (because of this), is there also a way to use useQuery here?

[kxxoling]

useQuery is another react hook, of course you can use it in context as if it's wrapped in QueryClientProvider.