refactor: webStoragPersister -> syncStoragePersister

Author: TkDodo

docs/config.json

@@ -302,8 +302,8 @@
           "to": "plugins/persistQueryClient"
         },
         {
-          "label": "createWebStoragePersister",
-          "to": "plugins/createWebStoragePersister"
+          "label": "createSyncStoragePersister",
+          "to": "plugins/createSyncStoragePersister"
         },
         {
           "label": "createAsyncStoragePersister",

docs/guides/migrating-to-react-query-4.md

@@ -211,7 +211,7 @@ React.useEffect(() => mySideEffectHere(data), [data])
 
 ### `persistQueryClient` and the corresponding persister plugins are no longer experimental and have been renamed
 
-The plugins `createWebStoragePersistor` and `createAsyncStoragePersistor` have been renamed to [`createWebStoragePersister`](/plugins/createWebStoragePersister) and [`createAsyncStoragePersister`](/plugins/createAsyncStoragePersister) respectively. The interface `Persistor` in `persistQueryClient` has also been renamed to `Persister`. Checkout [this stackexchange](https://english.stackexchange.com/questions/206893/persister-or-persistor) for the motivation of this change.
+The plugins `createWebStoragePersistor` and `createAsyncStoragePersistor` have been renamed to [`createSyncStoragePersister`](/plugins/createSyncStoragePersister) and [`createAsyncStoragePersister`](/plugins/createAsyncStoragePersister) respectively. The interface `Persistor` in `persistQueryClient` has also been renamed to `Persister`. Checkout [this stackexchange](https://english.stackexchange.com/questions/206893/persister-or-persistor) for the motivation of this change.
 
 Since these plugins are no longer experimental, their import paths have also been updated:
 
@@ -221,7 +221,7 @@ Since these plugins are no longer experimental, their import paths have also bee
 - import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental'
 
 + import { persistQueryClient } from '@tanstack/react-query-persist-client'
-+ import { createWebStoragePersister } from '@tanstack/query-sync-storage-persister'
++ import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 + import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
 ```
 

docs/guides/mutations.md

@@ -286,7 +286,7 @@ If you persist offline mutations with the [persistQueryClient plugin](../plugins
 This is a technical limitation. When persisting to an external storage, only the state of mutations is persisted, as functions cannot be serialized. After hydration, the component that triggeres the mutation might not be mounted, so calling `resumePausedMutations` might yield an error: `No mutationFn found`.
 
 ```js
-const persister = createWebStoragePersister({
+const persister = createSyncStoragePersister({
   storage: window.localStorage,
 })
 const queryClient = new QueryClient({

docs/plugins/createAsyncStoragePersister.md

@@ -39,7 +39,7 @@ persistQueryClient({
 
 ## Retries
 
-Retries work the same as for a [WebStoragePersister](./createWebStoragePersister), except that they can also be asynchronous. You can also use all the predefined retry handlers.
+Retries work the same as for a [SyncStoragePersister](./createSyncStoragePersister), except that they can also be asynchronous. You can also use all the predefined retry handlers.
 
 ## API
 

docs/plugins/createWebStoragePersister.md renamed to docs/plugins/createSyncStoragePersister.md

@@ -1,21 +1,21 @@
 ---
-id: createWebStoragePersister
-title: createWebStoragePersister
+id: createSyncStoragePersister
+title: createSyncStoragePersister
 ---
 
 ## Installation
 
-This utility comes packaged with `react-query` and is available under the `react-query/createWebStoragePersister` import.
+This utility comes as a separate package and is available under the `'@tanstack/query-sync-storage-persister'` import.
 
 ## Usage
 
-- Import the `createWebStoragePersister` function
-- Create a new webStoragePersister
+- Import the `createSyncStoragePersister` function
+- Create a new syncStoragePersister
 - Pass it to the [`persistQueryClient`](./persistQueryClient) function
 
 ```ts
-import { persistQueryClient } from 'react-query/persistQueryClient'
-import { createWebStoragePersister } from 'react-query/createWebStoragePersister'
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -25,8 +25,8 @@ const queryClient = new QueryClient({
   },
 })
 
-const localStoragePersister = createWebStoragePersister({ storage: window.localStorage })
-// const sessionStoragePersister = createWebStoragePersister({ storage: window.sessionStorage })
+const localStoragePersister = createSyncStoragePersister({ storage: window.localStorage })
+// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })
 
 persistQueryClient({
   queryClient,
@@ -56,26 +56,26 @@ Per default, no retry will occur. You can use one of the predefined strategies t
   - will return a new `PersistedClient` with the oldest query removed.
 
 ```js
-const localStoragePersister = createWebStoragePersister({
+const localStoragePersister = createSyncStoragePersister({
   storage: window.localStorage,
   retry: removeOldestQuery
 })
 ```
 
 ## API
 
-### `createWebStoragePersister`
+### `createSyncStoragePersister`
 
-Call this function to create a webStoragePersister that you can use later with `persistQueryClient`.
+Call this function to create a syncStoragePersister that you can use later with `persistQueryClient`.
 
 ```js
-createWebStoragePersister(options: CreateWebStoragePersisterOptions)
+createSyncStoragePersister(options: CreateSyncStoragePersisterOptions)
 ```
 
 ### `Options`
 
 ```ts
-interface CreateWebStoragePersisterOptions {
+interface CreateSyncStoragePersisterOptions {
   /** The storage client used for setting an retrieving items from cache (window.localStorage or window.sessionStorage) */
   storage: Storage
   /** The key to use when storing the cache */
@@ -109,16 +109,16 @@ If you need to store more data in `localStorage`, you can override the `serializ
 
 ```js
 import { QueryClient } from '@tanstack/react-query';
-import { persistQueryClient } from 'react-query/persistQueryClient'
-import { createWebStoragePersister } from 'react-query/createWebStoragePersister'
+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: connectionsQueryClient,
-  persistor: createWebStoragePersister({
+  persistor: createSyncStoragePersister({
     storage: window.localStorage,
     serialize: data => compress(JSON.stringify(data)),
     deserialize: data => JSON.parse(decompress(data)),

docs/plugins/persistQueryClient.md

@@ -7,7 +7,7 @@ This is set of utilities for interacting with "persisters" which save your query
 
 ## Build Persisters
 
-- [createWebStoragePersister](/plugins/createWebStoragePersister)
+- [createSyncStoragePersister](/plugins/createSyncStoragePersister)
 - [createAsyncStoragePersister](/plugins/createAsyncStoragePersister)
 - [create a custom persister](#persisters)
 
@@ -57,7 +57,7 @@ the persister `removeClient()` is called and the cache is immediately discarded.
 ### `persistQueryClientSave`
 
 - Your query/mutation are [`dehydrated`](../reference/hydration#dehydrate) and stored by the persister you provided.
-- `createWebStoragePersister` and `createAsyncStoragePersister` throttle this action to happen at most every 1 second to save on potentially expensive writes.  Review their documentation to see how to customize their throttle timing.
+- `createSyncStoragePersister` and `createAsyncStoragePersister` throttle this action to happen at most every 1 second to save on potentially expensive writes.  Review their documentation to see how to customize their throttle timing.
 
 You can use this to explicitly persist the cache at the moment(s) you choose.
 
@@ -181,8 +181,8 @@ For this use-case, you can use the `PersistQueryClientProvider`. It will make su
 
 ```jsx
 
-import { PersistQueryClientProvider } from 'react-query/persistQueryClient'
-import { createWebStoragePersister } from 'react-query/createWebStoragePersister'
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -192,7 +192,7 @@ const queryClient = new QueryClient({
   },
 })
 
-const persister = createWebStoragePersister({
+const persister = createSyncStoragePersister({
   storage: window.localStorage,
 })
 

examples/react/offline/src/App.js

@@ -10,8 +10,8 @@ import {
 import { ReactQueryDevtools } from "react-query/devtools";
 import toast, { Toaster } from "react-hot-toast";
 
-import { PersistQueryClientProvider } from "react-query/persistQueryClient";
-import { createWebStoragePersister } from "react-query/createWebStoragePersister";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import {
   Link,
   Outlet,
@@ -23,7 +23,7 @@ import {
 import * as api from "./api";
 import { movieKeys, useMovie } from "./movies";
 
-const persister = createWebStoragePersister({
+const persister = createSyncStoragePersister({
   storage: window.localStorage,
 });
 

packages/query-sync-storage-persister/src/__tests__/storageIsFull.test.ts

@@ -5,7 +5,7 @@ import {
   QueryClient,
 } from '@tanstack/query-core'
 import { removeOldestQuery } from '@tanstack/react-query-persist-client'
-import { createWebStoragePersister } from '../index'
+import { createSyncStoragePersister } from '../index'
 import { sleep } from '../../../../tests/utils'
 
 function getMockStorage(limitSize?: number) {
@@ -39,14 +39,14 @@ function getMockStorage(limitSize?: number) {
   } as any as Storage
 }
 
-describe('createWebStoragePersister ', () => {
+describe('createpersister ', () => {
   test('basic store and recover', async () => {
     const queryCache = new QueryCache()
     const mutationCache = new MutationCache()
     const queryClient = new QueryClient({ queryCache, mutationCache })
 
     const storage = getMockStorage()
-    const webStoragePersister = createWebStoragePersister({
+    const persister = createSyncStoragePersister({
       throttleTime: 0,
       storage,
     })
@@ -64,9 +64,9 @@ describe('createWebStoragePersister ', () => {
       timestamp: Date.now(),
       clientState: dehydrate(queryClient),
     }
-    webStoragePersister.persistClient(persistClient)
+    persister.persistClient(persistClient)
     await sleep(1)
-    const restoredClient = await webStoragePersister.restoreClient()
+    const restoredClient = await persister.restoreClient()
     expect(restoredClient).toEqual(persistClient)
   })
 
@@ -77,7 +77,7 @@ describe('createWebStoragePersister ', () => {
 
     const N = 2000
     const storage = getMockStorage(N * 5) // can save 4 items;
-    const webStoragePersister = createWebStoragePersister({
+    const persister = createSyncStoragePersister({
       throttleTime: 0,
       storage,
       retry: removeOldestQuery,
@@ -99,9 +99,9 @@ describe('createWebStoragePersister ', () => {
       timestamp: Date.now(),
       clientState: dehydrate(queryClient),
     }
-    webStoragePersister.persistClient(persistClient)
+    persister.persistClient(persistClient)
     await sleep(10)
-    const restoredClient = await webStoragePersister.restoreClient()
+    const restoredClient = await persister.restoreClient()
     expect(restoredClient?.clientState.queries.length).toEqual(4)
     expect(
       restoredClient?.clientState.queries.find((q) => q.queryKey[0] === 'A'),
@@ -117,9 +117,9 @@ describe('createWebStoragePersister ', () => {
       timestamp: Date.now(),
       clientState: dehydrate(queryClient),
     }
-    webStoragePersister.persistClient(updatedPersistClient)
+    persister.persistClient(updatedPersistClient)
     await sleep(10)
-    const restoredClient2 = await webStoragePersister.restoreClient()
+    const restoredClient2 = await persister.restoreClient()
     expect(restoredClient2?.clientState.queries.length).toEqual(4)
     expect(
       restoredClient2?.clientState.queries.find((q) => q.queryKey[0] === 'A'),
@@ -135,7 +135,7 @@ describe('createWebStoragePersister ', () => {
 
     const N = 2000
     const storage = getMockStorage(0)
-    const webStoragePersister = createWebStoragePersister({
+    const persister = createSyncStoragePersister({
       throttleTime: 0,
       storage,
       retry: removeOldestQuery,
@@ -149,9 +149,9 @@ describe('createWebStoragePersister ', () => {
       timestamp: Date.now(),
       clientState: dehydrate(queryClient),
     }
-    webStoragePersister.persistClient(persistClient)
+    persister.persistClient(persistClient)
     await sleep(10)
-    const restoredClient = await webStoragePersister.restoreClient()
+    const restoredClient = await persister.restoreClient()
     expect(restoredClient).toEqual(undefined)
   })
 })

packages/query-sync-storage-persister/src/index.ts

@@ -10,7 +10,7 @@ interface Storage {
   removeItem: (key: string) => void
 }
 
-interface CreateWebStoragePersisterOptions {
+interface CreateSyncStoragePersisterOptions {
   /** The storage client used for setting and retrieving items from cache.
    * For SSR pass in `undefined`.
    */
@@ -34,14 +34,14 @@ interface CreateWebStoragePersisterOptions {
   retry?: PersistRetryer
 }
 
-export function createWebStoragePersister({
+export function createSyncStoragePersister({
   storage,
   key = `REACT_QUERY_OFFLINE_CACHE`,
   throttleTime = 1000,
   serialize = JSON.stringify,
   deserialize = JSON.parse,
   retry,
-}: CreateWebStoragePersisterOptions): Persister {
+}: CreateSyncStoragePersisterOptions): Persister {
   if (typeof storage !== 'undefined') {
     const trySave = (persistedClient: PersistedClient): Error | undefined => {
       try {