Is invalidating all queries possible?

[hmbrg]

I'm trying to invalidate all my queries at once. I know that sounds weird, but the use case is that our APIs work with and without authorization, but you get user specific data when logged in.

I tried queryCache.refetchQueries({ active: true }); and queryCache.invalidateQueries({ active: true }); but both sadly don't seem to work. When I specify a specific query everything works as intended.

According to the docs, the query key should be optional on both methods, but that's not the behavior I'm seeing. Is this invalidating all queries support?

[dusty]

I think .clear should achieve what you want.

https://react-query.tanstack.com/reference/QueryCache#querycacheclear

[hmbrg]

Sadly, this doesn't seem to work for me.

[ansh]

Answer is queryClient.invalidateQueries() as given below by @obsd

[TkDodo]

Can you create a codesandbox? I think this should work...

[carlosriveroib]

I think isn't working for me too, queryCache.clear() doesn't rerender.

I have this Provider

function UserProvider({ children, isAdmin, routeProtected }: UserProviderProps) {
  const { data, isLoading } = useQuery(
    ['me'],
    async () => {
      const response = await axios.get<User>('/api/user');

      return response.data;
    });

  console.log('dataProvider: ', data);

  if (routeProtected && !data && isLoading) {
    return <h1>Loading...</h1>;
  }

  if (routeProtected && !isLoading && !data) {
    Router.replace('/');
  }

  if (routeProtected && !isLoading && isAdmin && data?.role !== 'ADMIN') {
    Router.replace('/');
  }

  return (
    <UserContext.Provider
      value={{
        isLoading,
        user: data,
      }}
    >
      {children}
    </UserContext.Provider>
  );
}

and I have this for logOut

  const logOutMutation = useMutation(() => axios.post('/api/auth/logout'), {
    onSuccess: () => {
      queryClient.clear();
    },
  });

When I do logOutMutation.mutate() I expect the console.log in the provider will fire again with undefined

[TkDodo]

clear doesn't re-render - reset does

[carlosriveroib]

And it is possible to reset all queries at once?

[carlosriveroib]

Ok, resetQueries() without any key I guess reset all, thank you very much. You are the best!

[ArturasTv]

I think you should invalidate queries on sign-in, not on logout, because if your access token expires, you will be logouted in the background, and after signing in with a different user, you will get unexpected results.

[muhammadsaqib95]

query-invalidation This link helped me for this issue.

[Coding-Algorithm]

I think that link is not active anymore, this is active as of today query_invalidation

[obsd]

For all the lazy devs out there :)

queryClient.invalidateQueries()

does the magic

[Sunhat]

@obsd resetQueries, invalidateQueries, clear, all do different things.

According to the documentation, invalidateQueries marks the existing data as stale. This will trigger refetching, not initial fetching. Before calling people lazy, maybe consider understanding not everyone is looking for that.

https://tanstack.com/query/v4/docs/react/guides/query-invalidation

[obsd]

This is what the question is about, invalidation data, isn't it?

[osmanbaskaya]

Hi @obsd, I know that your intention was good. If you read the OP's question (not just the title), even though he was saying invalidation, you will notice that he wants to clear the cache to avoid leaking the information from previously signed-in users, so invalidating the queries won't be enough as it will show them before fetching the fresh ones (which they will fail because of unauthorized access).