T
TanStack•9mo ago
optimistic-gold

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.");
    },
});
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!
13 Replies
sensitive-blue
sensitive-blue•9mo ago
What version? invalidateQueries(['some-key']) is <=v4 syntax https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#supports-a-single-signature-one-object What likely is happening is RQ sees you opening the dev tools as a window focus change and it's triggering a refetch because you have refetchOnWindowFocus: true
Migrating to TanStack Query v5 | TanStack Query React Docs
Breaking Changes v5 is a major version, so there are some breaking changes to be aware of: Supports a single signature, one object useQuery and friends used to have many overloads in TypeScript differ...
optimistic-gold
optimistic-goldOP•9mo ago
Apologies for missing the invalidateQueries(['some-key']) part. I’m already using the new object format and tried removing refetchOnWindowFocus: true, but nothing changed. I've updated the question to include the new object format not invalidateQueries(['some-key']) part.
sensitive-blue
sensitive-blue•9mo ago
I'd need to see a minimal reporduction. You can try awaiting your invalidations with await Promise.all([...])
optimistic-gold
optimistic-goldOP•9mo ago
nothing happend 
 onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({
          queryKey: ["Goals"],
          refetchType: "all",
        }),
        queryClient.invalidateQueries({
          queryKey: ["analytics"],
          refetchType: "all",
        }),
      ]);

      onOpenChange(false);
    }, 
 onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({
          queryKey: ["Goals"],
          refetchType: "all",
        }),
        queryClient.invalidateQueries({
          queryKey: ["analytics"],
          refetchType: "all",
        }),
      ]);

      onOpenChange(false);
    },
sensitive-blue
sensitive-blue•9mo ago
Where does queryClient come from? Really can't keep guessing to be honest. A minimal reproduction is usually the necessary way
optimistic-gold
optimistic-goldOP•9mo ago
const queryClient = useQueryClient(); i already done this before I'm trying again to build and see if it's work right now I don't know if this a part of the solution or not, I'm working with next.js. As mentioned in the question, the issue persists. This bug is new to me—I’ve used React Query this way many times before, and invalidation has always worked as expected.
deep-jade
deep-jade•9mo ago
Do you have a minimal reproduction of the problem?
optimistic-gold
optimistic-goldOP•9mo ago
i don't know how to make one qz i don't know what is make this scenario
deep-jade
deep-jade•9mo ago
so you either start from our sandbox and add code in the direction of your code until you see it getting slow, or you remove code from your version in the direction of a standard sandbox until its no longer slow breaking it down like that will likely get you to "the thing" that causes it and then you might find an issue in react-query (which I will happily look at at this point), or you might not 🤷‍♂️ but sorry I'm not going to look into "here is all my code, what is wrong with it?" type of situations because I really don't have the time to do that
optimistic-gold
optimistic-goldOP•9mo ago
Totally get that, and I really appreciate it! thank you @TkDodo 🔮 I started from the TanStack Query sandbox and retraced my development process both forward and backward, but I still couldn't find any reason for this bug. I also can't create a mini rebuild since the bug appeared in my last commit, meaning I'd have to go through the entire process again. The issue is that React Query has stopped invalidating or refetching specific queries as expected—it refetches the data randomly, and I can't figure out why. Even when I try to manually invalidate them from the TanStack Query DevTools, it still doesn’t work. Strangely, as soon as I open the browser's DevTools, everything starts working perfectly without any issues in the flow.
optimistic-gold
optimistic-goldOP•9mo ago
deep-jade
deep-jade•9mo ago
Even when I try to manually invalidate them from the TanStack Query DevTools, it still doesn’t work. Strangely, as soon as I open the browser's DevTools, everything starts working.
Okay this sounds like you have a browser cache (set by response headers) and the invalidation works but just hits the browser cache. Probably in your devtools, you have the "disable cache" checkbox turned on so when they are open, it bypasses the cache.
optimistic-gold
optimistic-goldOP•9mo ago
I will try this it's works It's finally works thank you @TkDodo 🔮 Thank you very much! I explicitly forced cache bypass in the response headers by setting "Cache-Control": "no-cache" and Pragma: "no-cache", ensuring that the browser always fetches a fresh response instead of serving a cached version.

Did you find this page helpful?