Invalidated Cache but Old Data is Still Getting Pulled

[manu-remsense]

Hi guys,

I have a weird issue where I'm invalidating cache upon successful mutation, which results in old data getting pulled from cache rather than the new data from the database with the GET request. The invalidateQueries() despite seeming to be working, old data is still getting pulled, so I'm struggling with the data not updating in the react application. If I delete the browser cache, then the fresh data is pulled from the backend, while using invalidateQueries() does not seem to work for me. I can see the new data being submitted in the database, however when I refresh the page or make a POST request - the changes are not updated. The data is consistently being pulled from cache rather than the backend...

Here's what I have.

In the index.tsx I have QueryClientProvider, with queryClient object outside of the render,

Inside the render function,

 <ThemeProvider theme={theme}>
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <Parent />
      </QueryClientProvider>
    </React.StrictMode>
  </ThemeProvider>,

Outside of the render function

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 50, // Every 50 minutes
    },
  },
});

In the page component I pull data this way,

const { data: formData } = useQuery({
  queryKey: ["forms"],
  queryFn: () => getFormData(module, space),
});

this is the get function

export async function getFormData(module: string, space?: string) {
  const { data } = await axios.get(AnomalyDataUrl, {
    headers: getAuthHeader(),
    params: {
      module,
      space,
    },
  });

  return data;
}

In the component where I mutate the data

const queryClient = useQueryClient();
const { mutate } = useMutation({
  mutationFn: (form: FormData) => postFormData(form),
  onSuccess: () => {
    return queryClient.invalidateQueries(["forms"]);
  },
});

This is the post function,

export async function postFormData(formDara: FormData) {
  await axios.post(FormDataUrl, formData, { headers: getAuthHeader() });
}

I don't see anything wrong... I've spent more than a day, trying everything I can, researching every single thread related to invalidating queries, but to no avail..

Any help would be greatly appreciated!!

Thanks!

Using React Query v4

[TkDodo]

you need to make module and space part of your QueryKey !

[manu-remsense]

Appreciate the reply!

I have tried that now but it's still getting the old data 😢
I made the useQuery to use [module, space] as the queryKey and also invalidateQueries([module, space]). (I double checked the values of module and space are exact same in both).

It does refetch but the old cached data is retrieved - when inspecting the network tab I see that it gets 200 (from disk cache) status response.

[TkDodo]

that indicates that your browser caches data because of a cache header. As soon as you see the request in the browser devtools network tab, react query "works" and has done its job.

[manu-remsense]

Thanks so much! I didn't realise the response headers had something to do with it. I saw that the response headers had Cache-Control max age policy, so I replaced it with no-cache directive. Everything works perfectly now,

Apologies for bothering, the library is really good, thanks 👏🏽 !