T
TanStack•3mo ago
broad-brown

invalidateQueries not triggering refetch consistently across projects

Hello, I’m running into an issue with invalidateQueries. I’m using the same setup in two different projects, and in one project it works as expected, while in the other it doesn’t trigger a refetch after invalidation. Here’s my setup: 
// Hook
const useGetMe = () => {
  return useQuery({
    queryKey: ["get-me"],
    queryFn: getMe,
    retry: 0,
    refetchOnMount: false,
    refetchInterval: false,
  });
};

// In component
await queryClient.invalidateQueries({ queryKey: ["get-me"] });
// Hook
const useGetMe = () => {
  return useQuery({
    queryKey: ["get-me"],
    queryFn: getMe,
    retry: 0,
    refetchOnMount: false,
    refetchInterval: false,
  });
};

// In component
await queryClient.invalidateQueries({ queryKey: ["get-me"] });
In the first project, invalidateQueries correctly triggers a refetch. In the second project, not working even i'm using the same code. I don’t understand why the behavior differs between the two projects when the code is essentially the same. Could this be related to how refetchOnMount and invalidation interact, or maybe a config difference I’m overlooking? Thanks for your help!
10 Replies
adverse-sapphire
adverse-sapphire•3mo ago
I'm just spitballing here since everything here looks completely fine, but my first thought is that perhaps you are using the wrong queryClient. For example, are you accessing it using useQueryClient or by importing it? Alternatively, you have pointed out you are using await. Is this run on the client, or are you using something like NextJS server components where you can run async code inside the render? If this is the case, then this is the second thing that comes to my mind that may be an issue (however I've personally not used server components, so this is just speculation based on my lack of knowledge) --- I've only had the first case before as a result of a circular import 🤷‍♂️
broad-brown
broad-brownOP•3mo ago
Thanks @ViewableGravy for your reply. I’m already accessing the queryClient using useQueryClient, and for the second point, I’m indeed using client components. What’s happening is really strange and confusing, because I’m quite sure my implementation is correct.
adverse-sapphire
adverse-sapphire•3mo ago
Welp, that's me out of ideas then 😂 Hopefully someone else has ran into something similar and can help. If the code is public, or you can create a reproduction of the issue, that will help obviously. And for the sake of asking, you have tried removing all props off the query other than queryFn and queryKey and it's still happening? I personally use retry, refetchOnMount and refetchInterval very infrequently, so it's very possible that there is some functional differences between passing false, true, undefined, etc to these props.
xenial-black
xenial-black•3mo ago
did you take a look at the query devtools? they usually have the answer to why something isn't refetching. maybe the query isn't active, or maybe the key doesn't match, or maybe the queryClient isn't stable, or ....
broad-brown
broad-brownOP•3mo ago
yes i use the devtools and when i invalidate it from the devtools it works fine, but the queryClient.invalidateQueries not. The problem that i'm using queryClient.invalidateQueries with other queries and it works fine.
xenial-black
xenial-black•3mo ago
then the keys aren't matching or it's the wrong queryClient being used
broad-brown
broad-brownOP•3mo ago
I'm using it like this it's simple no complex keys 
 await queryClient.invalidateQueries({
                    queryKey: ['get-me'],
                    exact: false,
                });
 await queryClient.invalidateQueries({
                    queryKey: ['get-me'],
                    exact: false,
                });
xenial-black
xenial-black•3mo ago
If that's the case you should be able to easily reproduce this in a codesandbox?
broad-brown
broad-brownOP•3mo ago
@TkDodo 🔮 I think I may have found the root of the issue. I have an endpoint called get-consultants that’s used in two cases: creating a new consultant and updating a consultant’s role. When I update a role, the invalidateQueries works perfectly — I see a 200 OK response in the network tab, and the response body contains the updated data. However, when I create a new consultant, the invalidateQueries doesn’t behave the same way. Even though I’m calling it like this (with exact: false so no strict key match is required): 
await queryClient.invalidateQueries({
  queryKey: ['get-consultants'],
  exact: false,
});
await queryClient.invalidateQueries({
  queryKey: ['get-consultants'],
  exact: false,
});
In this case, the network tab shows a 304 Cached response instead of 200 OK, and the response body doesn’t include the newly created consultant.
xenial-black
xenial-black•3mo ago
well then you have some sort of network caching that's beyond react-query. when you see the network request in the network tab, it means that invalidateQueries worked btw, exact: false is the default behaviour

Did you find this page helpful?