T
TanStack•19h ago
sunny-green

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!
1 Reply
extended-salmon
extended-salmon•2h 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 🤷‍♂️

Did you find this page helpful?