createAsyncStoragePersister
Installation
Dieses Hilfsprogramm ist als separates Paket erhältlich und steht unter dem Import ''@tanstack/query-async-storage-persister' zur Verfügung.
bash
npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
npm install @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
oder
bash
pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
pnpm add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
oder
bash
yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
yarn add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
oder
bash
bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
bun add @tanstack/query-async-storage-persister @tanstack/react-query-persist-client
Verwendung
- Importieren Sie die Funktion createAsyncStoragePersister
- Erstellen Sie einen neuen asyncStoragePersister
- Sie können ihm jeden Speicher übergeben, der der AsyncStorage-Schnittstelle entspricht - das folgende Beispiel verwendet den Async-Storage von React Native.
- Speicher, die synchron lesen und schreiben, wie z. B. window.localstorage, halten sich ebenfalls an die AsyncStorage-Schnittstelle und können daher auch mit createAsyncStoragePersister verwendet werden.
- Umschließen Sie Ihre App mit der Komponente PersistQueryClientProvider.
tsx
import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
},
})
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
})
const Root = () => (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}
>
<App />
</PersistQueryClientProvider>
)
export default Root
import AsyncStorage from '@react-native-async-storage/async-storage'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
},
})
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
})
const Root = () => (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}
>
<App />
</PersistQueryClientProvider>
)
export default Root
Wiederholungsversuche
Wiederholungsversuche funktionieren genauso wie bei einem SyncStoragePersister, außer dass sie auch asynchron sein können. Sie können auch alle vordefinierten Wiederholungsversuchs-Handler verwenden.
API
createAsyncStoragePersister
Rufen Sie diese Funktion auf, um einen asyncStoragePersister zu erstellen, den Sie später mit persistQueryClient verwenden können.
tsx
createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions)
createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions)
Optionen
tsx
interface CreateAsyncStoragePersisterOptions {
/** The storage client used for setting an retrieving items from cache */
storage: AsyncStorage | undefined | null
/** The key to use when storing the cache to localStorage */
key?: string
/** To avoid localStorage spamming,
* pass a time in ms to throttle saving the cache to disk */
throttleTime?: number
/** How to serialize the data to storage */
serialize?: (client: PersistedClient) => string
/** How to deserialize the data from storage */
deserialize?: (cachedString: string) => PersistedClient
/** How to retry persistence on error **/
retry?: AsyncPersistRetryer
}
interface AsyncStorage<TStorageValue = string> {
getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
removeItem: (key: string) => MaybePromise<void>
entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
}
interface CreateAsyncStoragePersisterOptions {
/** The storage client used for setting an retrieving items from cache */
storage: AsyncStorage | undefined | null
/** The key to use when storing the cache to localStorage */
key?: string
/** To avoid localStorage spamming,
* pass a time in ms to throttle saving the cache to disk */
throttleTime?: number
/** How to serialize the data to storage */
serialize?: (client: PersistedClient) => string
/** How to deserialize the data from storage */
deserialize?: (cachedString: string) => PersistedClient
/** How to retry persistence on error **/
retry?: AsyncPersistRetryer
}
interface AsyncStorage<TStorageValue = string> {
getItem: (key: string) => MaybePromise<TStorageValue | undefined | null>
setItem: (key: string, value: TStorageValue) => MaybePromise<unknown>
removeItem: (key: string) => MaybePromise<void>
entries?: () => MaybePromise<Array<[key: string, value: TStorageValue]>>
}
Die Standardoptionen sind
tsx
{
key = `REACT_QUERY_OFFLINE_CACHE`,
throttleTime = 1000,
serialize = JSON.stringify,
deserialize = JSON.parse,
}
{
key = `REACT_QUERY_OFFLINE_CACHE`,
throttleTime = 1000,
serialize = JSON.stringify,
deserialize = JSON.parse,
}
