correct-apricot

Use my queryClient oustide React context

Hey there, I'm here because I'm not sure of how it would work to use my queryClient both inside & outside my react context. Let me explain: Suppose I have this file:

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 1000,
            gcTime: 1000 * 60 * 60 * 24,
            networkMode: "always",
            retry: 3,
        },
    },
})

export const QueryClientProvider = ({ children }: PropsWithChildren) => {
    useEffect(() => {
        initReactQueries(queryClient)
    }, [])

    return (
        <PersistQueryClientProvider
            client={queryClient}
            persistOptions={{ persister: dataStoragePersister }}
        >
            {children}
        </PersistQueryClientProvider>
    )
}

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 1000,
            gcTime: 1000 * 60 * 60 * 24,
            networkMode: "always",
            retry: 3,
        },
    },
})

export const QueryClientProvider = ({ children }: PropsWithChildren) => {
    useEffect(() => {
        initReactQueries(queryClient)
    }, [])

    return (
        <PersistQueryClientProvider
            client={queryClient}
            persistOptions={{ persister: dataStoragePersister }}
        >
            {children}
        </PersistQueryClientProvider>
    )
}

Where my dataStoragePersister is defined oustide (and does work). If I export my queryClient variable and use it somewhere else (for exemple in an axios interceptor or in a simple function somewhere), does it will use the persister ? Or I must use the client by using useQueryClient to access it version with the persister ? I guess my real questions are: - Does the queryClient is a singleton that is altered by the PersistQueryClientProvider, or does it copy and manage it own instance of the client ? - Using the client outstide the react context (and so without useQueryClient) could lead to unexpected behavior ? Like trying to trigger a query when the persister is not yet up or anything else ? Because it would be really usefull to use it sometimes outside of my react components, for Axios at least. Thanks !

6 Replies

correct-apricot•14mo ago

https://tkdodo.eu/blog/react-query-fa-qs#why-should-i-usequeryclient

React Query FAQs

Answering the most frequently asked React Query questions

correct-apricot•14mo ago

You may just put queryClient in its own file and export it

export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 1000,
            gcTime: 1000 * 60 * 60 * 24,
            networkMode: "always",
            retry: 3,
        },
    },
})

export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 1000,
            gcTime: 1000 * 60 * 60 * 24,
            networkMode: "always",
            retry: 3,
        },
    },
})

In most cases it just works, it will be a singleton across the app as you use a single instance of a QueryClient class.

wee-brown•14mo ago

1. Your react query client is an instance, so operations you perform on it will also affect your react components, which would be effectively subscribing to the same client cache. 2. It appears your perister synchronization will still work, or you can set up a manual subscription synchronization outside of React (https://tanstack.com/query/latest/docs/framework/react/plugins/persistQueryClient#persistqueryclientsubscribe) ... but this is not necessary unless for some reason you are going to be unmounting the PersisQueryClientProvider 3. You can perform these operations outside of react, and any place fetching the same data with the same query key will use cached values. The example you provide is maybe not the most "ergonomic", but it will work. Are you trying to eagerly do a bunch of prefetching with initReactQueries? And avoid a "fetch as you render" waterfall? Otherwise, I'd say just let your components use useQuery to fetch your data dependencies (but what you have is also fine, assuming you know the consequences)

persistQueryClient | TanStack Query React Docs

This is set of utilities for interacting with "persisters" which save your queryClient for later use. Different persisters can be used to store your client and cache to many different storage layers. Build Persisters

correct-apricotOP•14mo ago

Okay, that's exactly what I want to do, but prefered be sure that it will be the same instance as the one I get using useQueryClient() hook. So that's seems perfect Okay I'll do some tests to check that everything works with my singleton. And my initReactQueries just create defaults queries to define my axios calls, and then I just use the queryKey on my components to fetch needed data. Don't know if it's a good practice, it seems to me

wee-brown•14mo ago

Hmm, still having trouble picturing what initReactQueries does... But sounds good to me! You may be able to take @denis.monastyrskyi 's suggestion and just reference the Singleton directly vs having to set it up in a function call

correct-apricotOP•14mo ago

Okay actually I simplify it a lot, but overall i had some things like this:

queryClient.setQueryDefaults(queryKeys.auth.postLogin, {
    queryFn: async ({ queryKey }) => (await axios.get("/auth/postLogin", { queryKey })).data,
})

queryClient.setQueryDefaults(queryKeys.auth.postLogin, {
    queryFn: async ({ queryKey }) => (await axios.get("/auth/postLogin", { queryKey })).data,
})

But because I thought I had to use the queryClient from the hook, I made a function to pass it the client. Now I can just import it and directly include this file in my main 😉

Gaming

Programming

Use my queryClient oustide React context

Did you find this page helpful?