LocalStorage persister not working as expected

[GarrisonBates]

I'm using a localStorage persister:

import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

import { QueryClient } from '@tanstack/query-core'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { ReactNode } from 'react'
import superjson from 'superjson'

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: Infinity,
      staleTime: 1000 * 30, // 30 seconds, just long enough to avoid double fetching on page load
      maxPages: 5, // Max number of pages to keep in cache. Don't want infinite queries to store infinite data in localStorage.
      retry: 2,
    },
  },
})
const persister = createSyncStoragePersister({
  storage: window.localStorage,
  serialize: (data) => superjson.stringify(data),
  deserialize: (data) => superjson.parse(data),
})

interface QueryClientProviderProps {
  children: ReactNode
}
export const QueryClientProvider = ({ children }: QueryClientProviderProps) => {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{
        persister,
      }}
      // Invalidate all queries on hydrating success, so that staleTime is reset and everything's refetched on refresh:
      onSuccess={() => queryClient.invalidateQueries()}
    >
      {children}
    </PersistQueryClientProvider>
  )
}

Which wraps my whole app.

To my understanding, networkMode: 'offlineFirst' is automatically set when using a persister. So I expected that going offline and firing a query that's already persisted would result in the data being hydrated from localStorage and displayed.

But either way, even when I explicitly set networkMode: 'offlineFirst', the behavior's the same. An error is propagated and the entry is entirely deleted from localStorage.

Is this the correct behavior, or is it possible that I have something configured incorrectly? I read through the docs on persisters and networkMode, and based on what I read this behavior is surprising to me, so I'm wondering if something's off.

[TkDodo]

To my understanding, networkMode: 'offlineFirst' is automatically set when using a persister.

not that I know of

[GarrisonBates]

Was basing that on this code:

query/packages/query-core/src/queryClient.ts

Line 613 in 2be8cca

if (!defaultedOptions.networkMode && defaultedOptions.persister) {

I definitely might be reading that wrong since I didn't trace exactly where defaultedOptions came from or where it's going. Just happened to see it when I was looking through the code for networkMode. But even when I explicitly set networkMode: 'offlineFirst' the behavior's the same.

So I guess I worded my question kind of poorly. The real question is why is this happening even when offlineFirst is explicitly set?

[TkDodo]

defaultedOptions.persister

that’s the experimental persister, not the PersistQueryClient.

[TkDodo]

The real question is why is this happening even when offlineFirst is explicitly set?

I would need to see a reproduction please