How to maintain data offline in react-query?

[pruge]

When offline, data is lost within approximately 5 to 6 minutes.
If I turn the app off and on, the data is lost.
I want the data to remain in the cache so I can use it offline.

The configuration is as follows, referring to the document.
Maybe I missed something?

import React, {PropsWithChildren} from 'react'
import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
import {createSyncStoragePersister} from '@tanstack/query-sync-storage-persister'
import {QueryClient, onlineManager} from '@tanstack/react-query'
import NetInfo from '@react-native-community/netinfo'
import {localStorage} from '@lib/localStorage'

onlineManager.setEventListener((setOnline) =>
  NetInfo.addEventListener((state) => setOnline(Boolean(state.isConnected))),
)

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: Infinity,
      staleTime: Infinity,
      networkMode: 'offlineFirst',
      retry: 0,
    },
  },
})

const persister = createSyncStoragePersister({storage: localStorage})

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

export default QueryProvider

// localStoge
import {MMKVLoader} from 'react-native-mmkv-storage'

const storage = new MMKVLoader().initialize()

export const localStorage = {
  setItem: (key: string, value: any) => {
    storage.setString(key, JSON.stringify(value))
  },
  getItem: (key: string) => {
    const value = storage.getString(key)
    return value === undefined ? null : JSON.parse(value)
  },
  removeItem: (key: string) => {
    storage.removeItem(key)
  },
}

    "@tanstack/query-sync-storage-persister": "^5.8.7",
    "@tanstack/react-query": "^5.8.9",
    "@tanstack/react-query-persist-client": "^5.8.9",

[TkDodo]

should work, show a reproduction please

[sleekLancelot]

Make your createSyncStoragePersister look like this:

const storage = new MMKVLoader().initialize()

const persister = createSyncStoragePersister({
  storage: storage,
})