All QueryCaches immediately removed when using PersistQueryClientProvider

[GarrisonBates]

I asked a question yesterday, but I've narrowed it down significantly. I found out that React Query provides a plugin for localStorage caching, so I switched to that. This is the relevant code:

const queryClient = new QueryClient({defaultOptions: {
  queries: {
    gcTime: Infinity
  }
}});
const persister = createSyncStoragePersister({
  storage: window.localStorage,
})

export default function App() {
useEffect(() => {
    const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
      console.log("Cache event: ", event);
    });

    return () => {
      unsubscribe();
    };
  }, []);

return (
    <>
      <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>

...

As you can see, I have a useEffect that monitors changes to the cache. The behavior seems to me to be very strange:

At first, everything appears normal. 6 added cache events fire, which correspond with the 6 queries cached in localStorage. So it appears as if everything's rehydrating correctly.

However, then a 7th "added" event fires, with queryKey ["userId", null]. For context, ["userId", user.uid] is a queryKey for one of my queries, and I have it set to enabled: !!user?.uid. Despite this, the query gets added to the cache. At this point, I run queryClient.getQueryCache().getAll(), and see all 7 queries in the cache, as expected.

Next, an observerResultsUpdated event fires, also for ["userId", null], followed by an observerAdded event for the same.

Immediately afterwards, 7 removed events fire in a row, effectively deleting my entire queryCache. Then, immediately following, another added event fires for ["userId", null], adding it back to the cache.

I can't for the life of my figure out what's causing this strange behavior, in particular the removal of every single query in the cache right after the addition of ["userId", null]. Frankly, I can't understand why that query would even be added, since I'd think that my enabled: !!user?.uid on the useUserId query would prevent a key with null from every being used.

So, what could possibly be triggering the deletion of all of my queries? Thanks for any help in advance!

[GarrisonBates]

I figured out the cause of this issue. Lazy loading certain components was causing the deletion of my query cache, and when I switched to synchronous import this resolved the problem.