diff --git a/.eslintrc b/.eslintrc index dceb933028..1e0ce191f5 100644 --- a/.eslintrc +++ b/.eslintrc @@ -40,7 +40,7 @@ "zones": [ { "target": "src/core", "from": "src/broadcastQueryClient-experimental" }, { "target": "src/core", "from": "src/createAsyncStoragePersister" }, - { "target": "src/core", "from": "src/createWebStoragePersister" }, + { "target": "src/core", "from": "src/createSyncStoragePersister" }, { "target": "src/core", "from": "src/devtools" }, { "target": "src/core", "from": "src/persistQueryClient" }, { "target": "src/core", "from": "src/reactjs" } diff --git a/createSyncStoragePersister/index.d.ts b/createSyncStoragePersister/index.d.ts new file mode 100644 index 0000000000..47e1d75770 --- /dev/null +++ b/createSyncStoragePersister/index.d.ts @@ -0,0 +1 @@ +export * from '../lib/createSyncStoragePersister' diff --git a/createSyncStoragePersister/index.js b/createSyncStoragePersister/index.js new file mode 100644 index 0000000000..befe5f114d --- /dev/null +++ b/createSyncStoragePersister/index.js @@ -0,0 +1 @@ +module.exports = require('../lib/createSyncStoragePersister/index') diff --git a/createWebStoragePersister/index.d.ts b/createWebStoragePersister/index.d.ts deleted file mode 100644 index 3959f0cc26..0000000000 --- a/createWebStoragePersister/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '../lib/createWebStoragePersister' diff --git a/createWebStoragePersister/index.js b/createWebStoragePersister/index.js deleted file mode 100644 index c77f23f1ca..0000000000 --- a/createWebStoragePersister/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../lib/createWebStoragePersister/index') diff --git a/docs/config.json b/docs/config.json index 1812b79658..b6ffb11c1d 100644 --- a/docs/config.json +++ b/docs/config.json @@ -302,8 +302,8 @@ "to": "plugins/persistQueryClient" }, { - "label": "createWebStoragePersister", - "to": "plugins/createWebStoragePersister" + "label": "createSyncStoragePersister", + "to": "plugins/createSyncStoragePersister" }, { "label": "createAsyncStoragePersister", diff --git a/docs/guides/migrating-to-react-query-4.md b/docs/guides/migrating-to-react-query-4.md index 734162410d..5f0452c1ca 100644 --- a/docs/guides/migrating-to-react-query-4.md +++ b/docs/guides/migrating-to-react-query-4.md @@ -201,17 +201,17 @@ 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: ```diff - import { persistQueryClient } from 'react-query/persistQueryClient-experimental' -- import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' +- import { createSyncStoragePersister } from 'react-query/createSyncStoragePersister-experimental' - import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental' + import { persistQueryClient } from 'react-query/persistQueryClient' -+ import { createWebStoragePersister } from 'react-query/createWebStoragePersister' ++ import { createSyncStoragePersister } from 'react-query/createSyncStoragePersister' + import { createAsyncStoragePersister } from 'react-query/createAsyncStoragePersister' ``` diff --git a/docs/guides/mutations.md b/docs/guides/mutations.md index ac38a5a424..6eaf9af1f3 100644 --- a/docs/guides/mutations.md +++ b/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({ @@ -314,7 +314,7 @@ export default function App() { queryClient.resumePausedMutations() }} > - + ) } diff --git a/docs/plugins/createAsyncStoragePersister.md b/docs/plugins/createAsyncStoragePersister.md index 2efa176ba5..5ab5e75315 100644 --- a/docs/plugins/createAsyncStoragePersister.md +++ b/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 [WebStoragePersister](./createSyncStoragePersister), except that they can also be asynchronous. You can also use all the predefined retry handlers. ## API diff --git a/docs/plugins/createWebStoragePersister.md b/docs/plugins/createWebStoragePersister.md index 1b897f670d..9fde7a7811 100644 --- a/docs/plugins/createWebStoragePersister.md +++ b/docs/plugins/createWebStoragePersister.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 packaged with `react-query` and is available under the `react-query/createSyncStoragePersister` import. ## Usage -- Import the `createWebStoragePersister` function +- Import the `createSyncStoragePersister` function - Create a new webStoragePersister - Pass it to the [`persistQueryClient`](./persistQueryClient) function ```ts import { persistQueryClient } from 'react-query/persistQueryClient' -import { createWebStoragePersister } from 'react-query/createWebStoragePersister' +import { createSyncStoragePersister } from 'react-query/createSyncStoragePersister' 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,7 +56,7 @@ 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 }) @@ -64,12 +64,15 @@ const localStoragePersister = createWebStoragePersister({ ## API -### `createWebStoragePersister` +### `createSyncStoragePersister` Call this function to create a webStoragePersister that you can use later with `persistQueryClient`. ```js -createWebStoragePersister(options: CreateWebStoragePersisterOptions) +createSyncStoragePersister(options +: +CreateWebStoragePersisterOptions +) ``` ### `Options` @@ -110,7 +113,7 @@ If you need to store more data in `localStorage`, you can override the `serializ ```js import { QueryClient } from 'react-query'; import { persistQueryClient } from 'react-query/persistQueryClient' -import { createWebStoragePersister } from 'react-query/createWebStoragePersister' +import { createSyncStoragePersister } from 'react-query/createSyncStoragePersister' import { compress, decompress } from 'lz-string'; @@ -118,7 +121,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: In persistQueryClient({ queryClient: connectionsQueryClient, - persistor: createWebStoragePersister({ + persistor: createSyncStoragePersister({ storage: window.localStorage, serialize: data => compress(JSON.stringify(data)), deserialize: data => JSON.parse(decompress(data)), diff --git a/docs/plugins/persistQueryClient.md b/docs/plugins/persistQueryClient.md index 04b104e203..f802d9511f 100644 --- a/docs/plugins/persistQueryClient.md +++ b/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. @@ -182,7 +182,7 @@ 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 { createSyncStoragePersister } from 'react-query/createSyncStoragePersister' const queryClient = new QueryClient({ defaultOptions: { @@ -192,7 +192,7 @@ const queryClient = new QueryClient({ }, }) -const persister = createWebStoragePersister({ +const persister = createSyncStoragePersister({ storage: window.localStorage, }) diff --git a/examples/react/basic-typescript/src/index.tsx b/examples/react/basic-typescript/src/index.tsx index a7233acb52..7dbfb5917e 100644 --- a/examples/react/basic-typescript/src/index.tsx +++ b/examples/react/basic-typescript/src/index.tsx @@ -4,7 +4,7 @@ import ReactDOM from "react-dom/client"; import axios from "axios"; import { useQuery, useQueryClient, QueryClient } from "react-query"; import { PersistQueryClientProvider } from "react-query/persistQueryClient"; -import { createWebStoragePersister } from "react-query/createWebStoragePersister"; +import { createSyncStoragePersister } from "react-query/createSyncStoragePersister"; import { ReactQueryDevtools } from "react-query/devtools"; const queryClient = new QueryClient({ @@ -15,7 +15,7 @@ const queryClient = new QueryClient({ }, }); -const persister = createWebStoragePersister({ +const persister = createSyncStoragePersister({ storage: window.localStorage, }); diff --git a/examples/react/offline/src/App.js b/examples/react/offline/src/App.js index 7eaf3ac4e7..c521312ce9 100644 --- a/examples/react/offline/src/App.js +++ b/examples/react/offline/src/App.js @@ -11,7 +11,7 @@ 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 { createSyncStoragePersister } from "react-query/createSyncStoragePersister"; 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, }); diff --git a/package.json b/package.json index 4a39520a8b..bf1dd7169b 100644 --- a/package.json +++ b/package.json @@ -52,9 +52,9 @@ "import": "./lib/persistQueryClient/index.mjs", "default": "./lib/persistQueryClient/index.js" }, - "./createWebStoragePersister": { - "import": "./lib/createWebStoragePersister/index.mjs", - "default": "./lib/createWebStoragePersister/index.js" + "./createSyncStoragePersister": { + "import": "./lib/createSyncStoragePersister/index.mjs", + "default": "./lib/createSyncStoragePersister/index.js" }, "./createAsyncStoragePersister": { "import": "./lib/createAsyncStoragePersister/index.mjs", @@ -98,7 +98,7 @@ "core", "devtools", "persistQueryClient", - "createWebStoragePersister", + "createSyncStoragePersister", "createAsyncStoragePersister", "broadcastQueryClient-experimental", "reactjs", diff --git a/rollup.config.js b/rollup.config.js index 6920153b77..22a93e751e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -26,9 +26,9 @@ const inputSrcs = [ 'persistQueryClient', ], [ - 'src/createWebStoragePersister/index.ts', - 'ReactQueryCreateWebStoragePersister', - 'createWebStoragePersister', + 'src/createSyncStoragePersister/index.ts', + 'ReactQueryCreateSyncStoragePersister', + 'createSyncStoragePersister', ], [ 'src/createAsyncStoragePersister/index.ts', diff --git a/src/createWebStoragePersister/index.ts b/src/createSyncStoragePersister/index.ts similarity index 94% rename from src/createWebStoragePersister/index.ts rename to src/createSyncStoragePersister/index.ts index 7b0e21fea4..25610337eb 100644 --- a/src/createWebStoragePersister/index.ts +++ b/src/createSyncStoragePersister/index.ts @@ -11,7 +11,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`. */ @@ -35,14 +35,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 { diff --git a/src/createWebStoragePersister/tests/storageIsFull.test.ts b/src/createSyncStoragePersister/tests/storageIsFull.test.ts similarity index 92% rename from src/createWebStoragePersister/tests/storageIsFull.test.ts rename to src/createSyncStoragePersister/tests/storageIsFull.test.ts index 95f51447a6..e1993171fe 100644 --- a/src/createWebStoragePersister/tests/storageIsFull.test.ts +++ b/src/createSyncStoragePersister/tests/storageIsFull.test.ts @@ -1,5 +1,5 @@ import { dehydrate, MutationCache, QueryCache, QueryClient } from '../../core' -import { createWebStoragePersister } from '../index' +import { createSyncStoragePersister } from '../index' import { removeOldestQuery } from '../../persistQueryClient' import { sleep } from '../../tests/utils' @@ -34,14 +34,14 @@ function getMockStorage(limitSize?: number) { } as any) as Storage } -describe('createWebStoragePersister ', () => { +describe('createSyncStoragePersister ', () => { 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 syncStoragePersister = createSyncStoragePersister({ throttleTime: 0, storage, }) @@ -59,9 +59,9 @@ describe('createWebStoragePersister ', () => { timestamp: Date.now(), clientState: dehydrate(queryClient), } - webStoragePersister.persistClient(persistClient) + syncStoragePersister.persistClient(persistClient) await sleep(1) - const restoredClient = await webStoragePersister.restoreClient() + const restoredClient = await syncStoragePersister.restoreClient() expect(restoredClient).toEqual(persistClient) }) @@ -72,7 +72,7 @@ describe('createWebStoragePersister ', () => { const N = 2000 const storage = getMockStorage(N * 5) // can save 4 items; - const webStoragePersister = createWebStoragePersister({ + const webStoragePersister = createSyncStoragePersister({ throttleTime: 0, storage, retry: removeOldestQuery, @@ -130,7 +130,7 @@ describe('createWebStoragePersister ', () => { const N = 2000 const storage = getMockStorage(0) - const webStoragePersister = createWebStoragePersister({ + const webStoragePersister = createSyncStoragePersister({ throttleTime: 0, storage, retry: removeOldestQuery, diff --git a/tsconfig.types.json b/tsconfig.types.json index 0f94228ab9..2d99bcdec0 100644 --- a/tsconfig.types.json +++ b/tsconfig.types.json @@ -13,7 +13,7 @@ "./src/index.ts", "./src/devtools/index.ts", "./src/persistQueryClient/index.ts", - "./src/createWebStoragePersister/index.ts", + "./src/createSyncStoragePersister/index.ts", "./src/createAsyncStoragePersister/index.ts", "./src/broadcastQueryClient-experimental/index.ts" ],