createSyncStoragePersister

사용 중단됨

이 플러그인은 더 이상 사용되지 않으며 다음 메이저 버전에서 제거됩니다. 대신 간단히 '@tanstack/query-async-storage-persister'를 사용할 수 있습니다.

설치

이 유틸리티는 별도 패키지로 제공되며 '@tanstack/query-sync-storage-persister' import를 통해 사용할 수 있습니다.

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

or

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

or

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

or

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

사용법

• createSyncStoragePersister 함수 가져오기
• 새 syncStoragePersister 생성
• 이를 persistQueryClient 함수에 전달합니다.

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

재시도

예를 들어 크기가 저장소의 사용 가능한 공간을 초과하면 영구 저장에 실패할 수 있습니다. persister에 retry 함수를 제공하여 오류를 적절하게 처리할 수 있습니다.

재시도 함수는 저장하려고 했던 persistedClient와 error 및 errorCount를 입력으로 받습니다. 다시 영구 저장을 시도할 새 PersistedClient를 반환해야 합니다. _undefined_가 반환되면 더 이상 영구 저장을 시도하지 않습니다.

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

사전 정의된 전략

기본적으로 재시도하지 않습니다. 재시도를 처리하려면 미리 정의된 전략 중 하나를 사용할 수 있습니다. 다음 from '@tanstack/react-query-persist-client'에서 가져올 수 있습니다:

• removeOldestQuery
  • 가장 오래된 쿼리가 제거된 새로운 PersistedClient를 반환합니다.

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

API

createSyncStoragePersister

나중에 persistQueryClient와 함께 사용할 수 있는 syncStoragePersister를 생성하려면 이 함수를 호출합니다.

createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)

Options

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
}

기본 옵션은 다음과 같습니다:

{
  key = `REACT_QUERY_OFFLINE_CACHE`,
  throttleTime = 1000,
  serialize = JSON.stringify,
  deserialize = JSON.parse,
}

serialize 및 deserialize 옵션

localStorage에 저장할 수 있는 데이터의 양에는 제한이 있습니다. localStorage에 더 많은 데이터를 저장해야 한다면 serialize 및 deserialize 함수를 재정의하여 lz-string 같은 라이브러리로 데이터를 압축하고 압축 해제할 수 있습니다.

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