Calling mutation from QueryCache / MutationCache

[woh-dev]

I'm trying to setup global error handling so that if a query or mutation errors out, it automatically tries to refetch the token. My code looks (simplified) like this:

    const logoutMutation = useLogoutMutation(setCurrentUser, currentUser)
    
    const refreshTokenMutation = useRefreshTokenMutation(
        logoutMutation,       ## called if refresh fails to clear user data
    )

    const mutationCache = new MutationCache({
        onError: (error) => {
            if (error.message === 'Invalid access token') {
               refreshTokenMutation.mutate()
            }
        },
    })

    const queryCache = new QueryCache({
        onError: (error) => {
            if (error.message === 'Invalid access token') {
                refreshTokenMutation.mutate()
            }
        },
    })

    const queryClient = new QueryClient({
        mutationCache,
        queryCache,
    })

return (

            <QueryClientProvider client={queryClient}>
                <App />
            </QueryClientProvider>

But I get a Error: No QueryClient set, use QueryClientProvider to set one error because logoutMutation and refreshTokenMutation are instantiated before the QueryClientProvider is set (I think?).

My guess is there is a simpler way to do this? Where am I going wrong?

[TkDodo]

you can't call useMutation or useQuery outside of a QueryClientProvider, so that's a bit of a chicken-egg problem. I think it might bet better just fire off the request without it being a mutation. You're not really taking advantage of what a mutation offers, like loading/error states etc ...