Can the client for QueryClientProvider change?

[Svish]

In the Default Query Function example, the query client is created "outside React" and then injected into the <QueryClientProvider> like this:

 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       queryFn: defaultQueryFn,
     },
   },
 })

 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <YourApp />
     </QueryClientProvider>
   )
 }

However, I (unfortunately) need to fetch the baseUrl for my defaultQueryFn from some settings provided to the app. Is it a problem to create the QueryClient "inside React", and "store" the created client in e.g. useMemo or useRef?

 function App({ baseUrl }) {
  const queryClient = useMemo(() => new QueryClient({ ... }), [baseUrl]);
  // or?
  const queryClientRef = useRef(null);
  useLayoutEffect(() => { queryClient.current = new QueryClient({ ... }) }, [baseUrl]);
  const queryClient = queryClientRef.current;

   return (
     <QueryClientProvider client={queryClient}>
       <YourApp />
     </QueryClientProvider>
   )
 }

Would that work? And how would react-query react if the queryClient instance was to be recreated? In my case that won't happen, because the baseUrl ultimately comes from server-side configuration files, but if react-query would handle it poorly, I suppose it would for example be a bad idea to use useMemo in this case since it's not guaranteed to never re-run. 🤔

[Svish]

And a related question: How would react-query react if the client prop was initially null? Say if I first needed to run an API query before I know what the default query handler should use as a baseUrl?

[TkDodo]

I think it should work, the QueryClient is just a vessel that is provided via context. Be aware that with new QueryClient, you would also create a new queryCache, thus loosing all cached data.

[Svish]

Good point about the cache, but I guess the QueryCache can also be provided, so could create one manually and supply the same for each new QueryClient?

Is there perhaps a way to just update the default query though? Without creating a new client?

[TkDodo]

you can create the QueryCache and MutationCache separately, outside of your app, and then just create a new QueryClient in your app that does the default query thingy:

const queryCache = newQueryCache()
const mutationCache = new MutationCache()

function App({ baseUrl }) {
  const queryClient = useMemo(() => new QueryClient({ queryCache, mutationCache, ... }), [baseUrl]);

Is there perhaps a way to just update the default query though? Without creating a new client?

Yes: https://react-query.tanstack.com/reference/QueryClient#queryclientsetdefaultoptions

[Svish]

Ah, perfect! Thank you for quick reply!