queryClient.invalidateQueries is not invalidating and refetching queries.

[Spider101]

I am trying to invalidate and refetch a query after performing a mutation on it by calling it in the method that the onSuccess option provides like so,

    const queryClient = useQueryClient();
    return useMutation(updatedPlayerData => savePlayerProgressData(updatedPlayerData), {
        onSuccess: savedPlayerData => {
            queryClient.invalidateQueries(['playerData', 19]);
        }
    });

However, the associated data is not being updated on the screen and when I inspect the query in the Query Dev Tools, I can see the isInvalidated flag still be set to false. I am not sure what I might be missing here. I don't think it is an issue of incorrectly setting the queryKey as I have tried hard-coding it from the dev tools (see snippet above) and tried the queryClient.invalidateQueries() variant to invalidate all queries but neither approaches are working. I'd really appreciate it if anyone can help me in this matter! Let me know if any other code or clarification is required.

[TkDodo]

the code that you've posted looks fine. not having the correct query key would've been my first instinct. be aware of the types. maybe the number 19 should in fact be the string 19? (just guessing here). Otherwise, if you put it in a codesandbox example, I'm happy to take a look. But as you can see in the existing examples, invalidation like that works (see e.g. here: https://react-query.tanstack.com/examples/optimistic-updates)

[Spider101]

Yea. I thought of the same thing but I tried hard-coding it as a string as well to no avail. Let me see if I can reproduce the issue in a sandbox. The weird thing is when I hit the refetch or the invalidate manually from the dev tools, it seems to work. But the code I posted doesn't seem to.

[Spider101]

One thing I noticed after fiddling around a bit more, is that this only happens when I refresh an individual item's page. For instance, I have two pages (react-router) - one, where I show a list of items and another, where I show details of that item. If I navigate from the list page to an individual item's page, the functionality works as expected. I even logged out queryClient.getQueryCache().getAll() to verify that there are two queries in the cache (one for the list and one for the individual item). However, if I refresh the page when I am on the individual item's page, I am running into the behavior I mentioned above. Furthermore, the queryClient.getQueryCache().getAll() returns an empty array even though I can see the ["playerData", <playerId>]" query in the dev tools window. Is the page refresh somehow disconnecting the queryClient from the current page's scope?
I have been working on reproducing the issue in a codesandbox all day but haven't met with any luck on that front. Apologies for having to work with such a vague premise! If it helps I can provide a link to the project I am working on.

[TkDodo]

if you're having a client-side rendered application, then refreshing the browser will be a fresh start: new queryClient with no queries in there. of course, if you are on the detail page, there will be no list query visible, because you've "never" been on the list page in this scenario.

not sure where / when you are calling queryClient.getQueryCache().getAll(), but I can assure you that the devtools always show the current state, because they are subscribed to the queryCache in an effect, see:

https://github.com/tannerlinsley/react-query/blob/5e40bf797c197e948c9da0e102a6cc9c623183c6/src/devtools/devtools.tsx#L390-L394

[Spider101]

Thanks, that clears up a few things! I agree that the list query would not be visible on the detail page but I was at least expecting to see the details query returned from the queryClient.getQueryCache().getAll() call. I am calling it from inside the onSuccess callback I mentioned earlier,

    const queryClient = useQueryClient();
    return useMutation(updatedPlayerData => savePlayerProgressData(updatedPlayerData), {
        onSuccess: savedPlayerData => {
            console.log(queryClient.getQueryCache().getAll());
            queryClient.invalidateQueries(['playerData', 19]);
        }
    });

[TkDodo]

if it works in the sandbox, it's very hard to analyze I'm afraid

[JasonKleban]

I'm having a similar experience. I'm invalidating my single-string-key query but it won't refetch. If I refetch manually with the react-query-devtools, then it will refetch and rerender. Unexpectedly, all of the queries are marked "stale", never "fresh". But I cannot get the mutate/mutateAsync onSuccess invalidateQueries to perform a refetch automatically.

[JasonKleban]

Solved my issue. I had two new QueryClients() instances in play by mistake due to some refactoring.