How to dynamically swap queryClient and persister based on user action (multiple user accounts use-case)?

[nop33]

In my application, the user can create multiple "accounts". I want the query data of each account to be persisted, so I use the PersistQueryClientProvider. I want persisted data to be persisted indefinitely, or until they are garbage collected. So I use the default config for QueryClient (aka, gcTime is 5 minutes) and Infinity for maxAge of persisted. So far so good.

const queryClient = new QueryClient()

const persisted: Persister = createTanstackIndexedDBPersister()

ReactDOM.render(
  <PersistQueryClientProvider client={queryClient} persistOptions={{ persister, maxAge: Infinity }}>
    <App />
  </PersistQueryClientProvider>
  document.getElementById('root')
)

The problem I try to solve is that when the user switches accounts, for example, they go from account A to account B, and they stay at account B for longer than 5 minutes, all persisted cached query data of account A will be garbage collected (since they become inactive) and removed from the cache and persisted cache. This is not my intention. I want to garbage-collect query data of the currently connected account. I want only inactive account B query data to be garbage collected after 5 minutes in the above scenario. I want account A cached data to remain in the persister, until the user has connected to account A at which point inactive data of account A can be removed from the cache.

I thought of having 1 queryClient and 1 persister per account and dynamically update the queryClient and persister when the user switches accounts, but this doesn't seem to work:

const QueryClientManager = ({ children }: QueryClientManager) => {
  const accountId = useAppSelector((s) => s.account.id)

  const [queryClient, setQueryClient] = useState<QueryClient>(createQueryClient())
  const [persister, setPersister] = useState<Persister>(createTanstackIndexedDBPersister())

  useEffect(() => {
    if (!accountId) return

    setQueryClient(createQueryClient())
    setPersister(createTanstackIndexedDBPersister(`tanstack-query-client-for-account-${accountId}`))
  }, [accountId])

  return (
    <PersistQueryClientProvider client={queryClient} persistOptions={{ persister, maxAge: Infinity }}>
      {children}
    </PersistQueryClientProvider>
  )
}

ReactDOM.render(
  <QueryClientManager>
    <App />
  </QueryClientManager>
  document.getElementById('root')
)

I would appreciate some guidance on the matter. What am I missing? Thank you 🙏

[nop33]

One thought i just had is whether I can use the dehydrateOptions to selectively define which data can be garbage collected, the same way we can define which data can be dehydrated...

[nop33]

Didn't work

[TkDodo]

I think you would need to specify different storage keys, because otherwise, they will overwrite each other. Then, set the maxAge of the persister higher - this is the time how long it’s stored in the storage. gcTime will still garbage collect from memory, and then from the disk.

[nop33]

I think you would need to specify different storage keys

In my example I am using different storage keys tanstack-query-client-for-account-${accountId} but that seems to not be sufficient.

Thanks for the reply :)

[nop33]

And yes, the maxAge is set to Infinity currently

[nop33]

This is how I ended up solving this.

// Inspired by https://github.com/TanStack/query/blob/1adaf3ff86fa2bf720dbc958714c60553c4aae08/packages/react-query-persist-client/src/PersistQueryClientProvider.tsx
export const PersistQueryClientContextProvider = ({ children }: { children: ReactNode }) => {
  const [isRestoring, setIsRestoring] = useState(true)
  const [unsubscribeFromQueryClientFn, setUnsubscribeFromQueryClientFn] = useState(() => () => {})

  const clearQueryCache = useCallback(() => {
    unsubscribeFromQueryClientFn()

    queryClient.clear()
  }, [unsubscribeFromQueryClientFn])

  const restoreQueryCache = useCallback(async (walletId: string) => {
    setIsRestoring(true)

    const options: PersistQueryClientOptions = {
      queryClient,
      maxAge: Infinity,
      persister: createTanstackIndexedDBPersister('tanstack-cache-for-wallet-' + walletId)
    }

    await persistQueryClientRestore(options)

    const newUnsubscribeFromQueryClientFn = persistQueryClientSubscribe(options)

    setUnsubscribeFromQueryClientFn(() => newUnsubscribeFromQueryClientFn)

    setIsRestoring(false)
  }, [])

  const deletePersistedCache = useCallback((walletId: string) => {
    createTanstackIndexedDBPersister('tanstack-cache-for-wallet-' + walletId).removeClient()
  }, [])

  return (
    <PersistQueryClientContext.Provider value={{ restoreQueryCache, clearQueryCache, deletePersistedCache }}>
      <QueryClientProvider client={queryClient}>
        <IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>
      </QueryClientProvider>
    </PersistQueryClientContext.Provider>
  )
}