PesistedQueryClient - what's the best way to clear queries or remove cache?

[taowen19]

Hello! I'm trying out the persistedQueryClient on v3. Basically I need to cache and persist some data when page is refreshed but removed when the tab/browser is closed.
With queryClient.clear(); or removeQueries(), there are still queries in the local storage. The only way worked for me was localStorage.removeItem("REACT_QUERY_OFFLINE_CACHE"); but that's not ideal.
Is there a better way to handle this? Or is there already a fix included in a higher version?

Thanks!

[TkDodo]

Basically I need to cache and persist some data when page is refreshed but removed when the tab/browser is closed.

use sessionStorage instead of localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

[taowen19]

Thanks! I also notice that the cache is not cleared after the max age I set but I couldn't see what i did wrong.
The query I have

export function useCustomHook() {
  return useQuery(
    'test-query-key',
    getData,
      {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        refetchOnReconnect: false,
        retry: false,
        staleTime: 1000 * 10 * 60,
      }
  );
}

The query client:

export const getOrCreateQueryClient = (): QueryClient => {
  if (!window.ReactQueryClient) {
    const queryClient = new QueryClient({
      defaultOptions: {
        queries: {
          cacheTime: 1000 * 10 * 60,
        },
      },
    });
    const sessionStoragePersistor = createWebStoragePersistor({
      storage: window.sessionStorage,
    })
    const persistedQueries: QueryKey[] = ['test-query-key'];

    persistQueryClient({
      queryClient,
      persistor: sessionStoragePersistor,
      maxAge: 1000 * 10 * 60,
      hydrateOptions: {},
      dehydrateOptions: {
        shouldDehydrateQuery: ({ queryKey }) => {
          return persistedQueries.includes(queryKey)
        },
      },
    });
    window.ReactQueryClient = queryClient;
  }
  return window.ReactQueryClient;
};`
```

I could see the query cache in session storage after the stale time I set. Is there anything I'm missing?