Data only re-fetching after leaving window focus

[ParkerZA]

I have data that I'm pulling though using useQuery: const allocation = useQuery("allocation", getStores);

My mutation function is this:

   const [mutate] = useMutation(async data => {
  const response = await axios.get(`${process.env.REACT_APP_ENDPOINT}/stores/endpoint`);
  return response.data;
}, {
  onSuccess: () => {
    console.log("Success");
    queryCache.invalidateQueries('allocation')
  }
})

In my JSX, I'm using a ternary expression like so: {allocation.isFetching? <Spinner /> : <MaterialTable data={allocation.data} />

There's an updater function within MaterialTable that I've left out for brevity. My problem is that once I get the data back after the mutation, the table isn't re-rendering. I have to leave focus of the tab in order for it to do so.

This could be more of a React or MaterialTable problem, but I'm really not sure. I've tried storing the data in state and using useEffect to update the table but that isn't working as well. React Query solved this problem for me before so I'm not sure why it isn't playing well with MaterialTable.

[TkDodo]

Not quite sure what the issue is. Are you not seeing the spinner or is the table just not re-rendering?
FYI, react-query will give you a referentially stable data if nothing changes with a refetch, but since you are unmounting with every refetch (not really recommended I would say), this shouldn’t matter.

Can you try and reproduce your behavior in a codesandbox maybe?