createSyncStoragePersister

Veraltet

Dieses Plugin ist veraltet und wird in der nächsten Hauptversion entfernt. Sie können stattdessen einfach '@tanstack/query-async-storage-persister' verwenden.

Installation

Dieses Hilfsprogramm ist als separates Paket erhältlich und kann unter dem Import '@tanstack/query-sync-storage-persister' bezogen werden.

bash

npm install @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

npm install @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

oder

bash

pnpm add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

pnpm add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

oder

bash

yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

yarn add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

oder

bash

bun add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

bun add @tanstack/query-sync-storage-persister @tanstack/react-query-persist-client

Verwendung

Importieren Sie die Funktion createSyncStoragePersister
Erstellen Sie einen neuen syncStoragePersister
Übergeben Sie ihn an die Funktion persistQueryClient

tsx

import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

const localStoragePersister = createSyncStoragePersister({
  storage: window.localStorage,
})
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })

persistQueryClient({
  queryClient,
  persister: localStoragePersister,
})

import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

const localStoragePersister = createSyncStoragePersister({
  storage: window.localStorage,
})
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })

persistQueryClient({
  queryClient,
  persister: localStoragePersister,
})

Wiederholungsversuche

Das Persistieren kann fehlschlagen, z. B. wenn die Größe den verfügbaren Speicherplatz überschreitet. Fehler können mit einer retry Funktion für den Persister graceful behandelt werden.

Die retry-Funktion erhält den zu speichernden persistedClient sowie den error und die errorCount als Eingabe. Es wird erwartet, dass sie einen *neuen* PersistedClient zurückgibt, mit dem erneut versucht wird, zu persistieren. Wenn *undefined* zurückgegeben wird, erfolgt kein weiterer Versuch zu persistieren.

tsx

export type PersistRetryer = (props: {
  persistedClient: PersistedClient
  error: Error
  errorCount: number
}) => PersistedClient | undefined

export type PersistRetryer = (props: {
  persistedClient: PersistedClient
  error: Error
  errorCount: number
}) => PersistedClient | undefined

Vordefinierte Strategien

Standardmäßig finden keine Wiederholungsversuche statt. Sie können eine der vordefinierten Strategien zur Behandlung von Wiederholungsversuchen verwenden. Sie können diese von '@tanstack/react-query-persist-client' importieren.

removeOldestQuery
- gibt einen neuen PersistedClient mit der ältesten abgefragten Daten entfernt zurück.

tsx

const localStoragePersister = createSyncStoragePersister({
  storage: window.localStorage,
  retry: removeOldestQuery,
})

const localStoragePersister = createSyncStoragePersister({
  storage: window.localStorage,
  retry: removeOldestQuery,
})

API

Rufen Sie diese Funktion auf, um einen syncStoragePersister zu erstellen, den Sie später mit persistQueryClient verwenden können.

tsx

createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)

createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)

Optionen

tsx

interface CreateSyncStoragePersisterOptions {
  /** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
  storage: Storage | undefined | null
  /** The key to use when storing the cache */
  key?: string
  /** To avoid 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?: PersistRetryer
}

interface CreateSyncStoragePersisterOptions {
  /** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
  storage: Storage | undefined | null
  /** The key to use when storing the cache */
  key?: string
  /** To avoid 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?: PersistRetryer
}

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,
}

serialize und deserialize Optionen

Es gibt eine Begrenzung für die Datenmenge, die im localStorage gespeichert werden kann. Wenn Sie mehr Daten im localStorage speichern müssen, können Sie die Funktionen serialize und deserialize überschreiben, um die Daten zu komprimieren und dekomprimieren, z. B. mit einer Bibliothek wie lz-string.

tsx

import { QueryClient } from '@tanstack/react-query'
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

import { compress, decompress } from 'lz-string'

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: Infinity } },
})

persistQueryClient({
  queryClient: queryClient,
  persister: createSyncStoragePersister({
    storage: window.localStorage,
    serialize: (data) => compress(JSON.stringify(data)),
    deserialize: (data) => JSON.parse(decompress(data)),
  }),
  maxAge: Infinity,
})

import { QueryClient } from '@tanstack/react-query'
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

import { compress, decompress } from 'lz-string'

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: Infinity } },
})

persistQueryClient({
  queryClient: queryClient,
  persister: createSyncStoragePersister({
    storage: window.localStorage,
    serialize: (data) => compress(JSON.stringify(data)),
    deserialize: (data) => JSON.parse(decompress(data)),
  }),
  maxAge: Infinity,
})

createSyncStoragePersister

Veraltet

Installation

Verwendung

Wiederholungsversuche

Vordefinierte Strategien

API