TanStackT
TanStack•10mo ago•
29 replies
few-sapphire

React Query Invalidation Not Working Until Browser DevTools Are Opened

Hello everyone,

I am facing an issue with React Query (@tanstack/react-query v5.69.0) where query invalidation does not work for any query key until I open the browser DevTools.

Setup: Query Client wrapped around the entire App.
defaultOptions:
- staleTime: 5 minutes
- gcTime: 60 minutes
- cacheTime: 60 minutes
- refetchOnWindowFocus: true
- refetchOnMount: true

Issue:
Whenever I call queryClient.invalidateQueries({ queryKey, ...filters }, options), the query does not refetch immediately. This happens with any query key I try. However, as soon as I open the browser DevTools, the refetch is triggered. It seems like React Query is not recognizing the invalidation unless DevTools are open.

This bug is new to me—I’ve used React Query this way many times before, and invalidation always worked as expected.

Here’s a minimal example focusing on the issue: 

const { mutate } = useMutation({
    mutationFn: async (data) => {
        return (await api.post("/goals", data)).data;
    },
    onSuccess: () => {
        console.log("Invalidating queries...");
        
        queryClient.invalidateQueries({
            queryKey: ["Goals"],
            refetchType: "all",
        });

        queryClient.invalidateQueries({
            queryKey: ["analytics"],
            refetchType: "all",
        });

        console.log("Queries invalidated, but refetch does not happen until DevTools are opened.");
    },
});


Key Observations:
- The console logs confirm that invalidateQueries() is being called.
- Queries do not refetch until I manually open the browser DevTools.
- The issue happens with any query key, not just "Goals".
- This is a new issue for me—I have used this setup before without problems.

Has anyone encountered this before? Any idea why this happens? Would appreciate any insights!
Was this page helpful?