experimental_createQueryPersister
Installation
Dieses Dienstprogramm ist Teil eines separaten Pakets und unter dem Import '@tanstack/query-persist-client-core' verfügbar.
npm install @tanstack/query-persist-client-core
npm install @tanstack/query-persist-client-core
oder
pnpm add @tanstack/query-persist-client-core
pnpm add @tanstack/query-persist-client-core
oder
yarn add @tanstack/query-persist-client-core
yarn add @tanstack/query-persist-client-core
oder
bun add @tanstack/query-persist-client-core
bun add @tanstack/query-persist-client-core
Verwendung
- Importieren Sie die Funktion experimental_createQueryPersister
- Erstellen Sie einen neuen experimental_createQueryPersister
- Sie können ihm jeden Speicher übergeben, der der AsyncStorage- oder Storage-Schnittstelle entspricht
- Übergeben Sie diesen Persister als Option an Ihre Abfrage. Dies kann entweder geschehen, indem Sie ihn an die Standardoptionen des QueryClient übergeben oder an eine beliebige Instanz des useQuery-Hooks.
- Wenn Sie diesen Persister als Standardoptionen übergeben, werden alle Abfragen im bereitgestellten Speicher gespeichert. Sie können dies zusätzlich einschränken, indem Sie Filter übergeben. Im Gegensatz zum persistClient-Plugin wird hier nicht der gesamte QueryClient als einzelnes Element gespeichert, sondern jede Abfrage separat. Als Schlüssel wird der Query-Hash verwendet.
- Wenn Sie diesen Persister einem einzelnen useQuery-Hook übergeben, wird nur diese Abfrage gespeichert.
Auf diese Weise müssen Sie nicht den gesamten QueryClient speichern, sondern können wählen, was in Ihrer Anwendung gespeichert werden soll. Jede Abfrage wird lazy wiederhergestellt (wenn die Abfrage zum ersten Mal verwendet wird) und gespeichert (nach jedem Durchlauf der queryFn), sodass sie nicht gedrosselt werden muss. staleTime wird auch nach der Wiederherstellung der Abfrage berücksichtigt. Wenn Daten als stale gelten, werden sie sofort nach der Wiederherstellung neu abgerufen. Wenn Daten fresh sind, wird die queryFn nicht ausgeführt.
Das Garbage Collecting einer Abfrage aus dem Speicher hat **keine** Auswirkung auf die gespeicherten Daten. Das bedeutet, Abfragen können für kürzere Zeit im Speicher gehalten werden, um **speichereffizienter** zu sein. Wenn sie das nächste Mal verwendet werden, werden sie einfach wieder aus dem persistenten Speicher wiederhergestellt.
import { QueryClient } from '@tanstack/vue-query'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'
const persister = experimental_createQueryPersister({
storage: AsyncStorage,
maxAge: 1000 * 60 * 60 * 12, // 12 hours
})
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 30, // 30 seconds
persister: persister.persisterFn,
},
},
})
import { QueryClient } from '@tanstack/vue-query'
import { experimental_createQueryPersister } from '@tanstack/query-persist-client-core'
const persister = experimental_createQueryPersister({
storage: AsyncStorage,
maxAge: 1000 * 60 * 60 * 12, // 12 hours
})
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 30, // 30 seconds
persister: persister.persisterFn,
},
},
})
Angepasste Standardwerte
Das createPersister-Plugin wickelt technisch die queryFn ein, sodass es nicht wiederhergestellt wird, wenn die queryFn nicht ausgeführt wird. Auf diese Weise fungiert es als Caching-Schicht zwischen der Abfrage und dem Netzwerk. Daher ist der networkMode standardmäßig auf 'offlineFirst' gesetzt, wenn ein Persister verwendet wird, sodass die Wiederherstellung aus dem persistenten Speicher auch dann erfolgen kann, wenn keine Netzwerkverbindung besteht.
API
experimental_createQueryPersister
experimental_createQueryPersister(options: StoragePersisterOptions)
experimental_createQueryPersister(options: StoragePersisterOptions)
Optionen
export interface StoragePersisterOptions {
/** The storage client used for setting and retrieving items from cache.
* For SSR pass in `undefined`.
*/
storage: AsyncStorage | Storage | undefined | null
/**
* How to serialize the data to storage.
* @default `JSON.stringify`
*/
serialize?: (persistedQuery: PersistedQuery) => string
/**
* How to deserialize the data from storage.
* @default `JSON.parse`
*/
deserialize?: (cachedString: string) => PersistedQuery
/**
* A unique string that can be used to forcefully invalidate existing caches,
* if they do not share the same buster string
*/
buster?: string
/**
* The max-allowed age of the cache in milliseconds.
* If a persisted cache is found that is older than this
* time, it will be discarded
* @default 24 hours
*/
maxAge?: number
/**
* Prefix to be used for storage key.
* Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
*/
prefix?: string
/**
* Filters to narrow down which Queries should be persisted.
*/
filters?: QueryFilters
}
interface AsyncStorage {
getItem: (key: string) => Promise<string | undefined | null>
setItem: (key: string, value: string) => Promise<unknown>
removeItem: (key: string) => Promise<void>
}
export interface StoragePersisterOptions {
/** The storage client used for setting and retrieving items from cache.
* For SSR pass in `undefined`.
*/
storage: AsyncStorage | Storage | undefined | null
/**
* How to serialize the data to storage.
* @default `JSON.stringify`
*/
serialize?: (persistedQuery: PersistedQuery) => string
/**
* How to deserialize the data from storage.
* @default `JSON.parse`
*/
deserialize?: (cachedString: string) => PersistedQuery
/**
* A unique string that can be used to forcefully invalidate existing caches,
* if they do not share the same buster string
*/
buster?: string
/**
* The max-allowed age of the cache in milliseconds.
* If a persisted cache is found that is older than this
* time, it will be discarded
* @default 24 hours
*/
maxAge?: number
/**
* Prefix to be used for storage key.
* Storage key is a combination of prefix and query hash in a form of `prefix-queryHash`.
*/
prefix?: string
/**
* Filters to narrow down which Queries should be persisted.
*/
filters?: QueryFilters
}
interface AsyncStorage {
getItem: (key: string) => Promise<string | undefined | null>
setItem: (key: string, value: string) => Promise<unknown>
removeItem: (key: string) => Promise<void>
}
Die Standardoptionen sind
{
prefix = 'tanstack-query',
maxAge = 1000 * 60 * 60 * 24,
serialize = JSON.stringify,
deserialize = JSON.parse,
}
{
prefix = 'tanstack-query',
maxAge = 1000 * 60 * 60 * 24,
serialize = JSON.stringify,
deserialize = JSON.parse,
}
