diff --git a/docs/config.json b/docs/config.json index 99624ee0cd..2f1a3a6db9 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 c3f6deaf41..010a30b43c 100644 --- a/docs/guides/migrating-to-react-query-4.md +++ b/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' ``` diff --git a/docs/guides/mutations.md b/docs/guides/mutations.md index ac38a5a424..125f121c32 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({ diff --git a/docs/plugins/createAsyncStoragePersister.md b/docs/plugins/createAsyncStoragePersister.md index 2efa176ba5..0d569cf2fc 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 [SyncStoragePersister](./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/createSyncStoragePersister.md similarity index 71% rename from docs/plugins/createWebStoragePersister.md rename to docs/plugins/createSyncStoragePersister.md index ee2001078e..e1bce76c4f 100644 --- a/docs/plugins/createWebStoragePersister.md +++ b/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,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,18 +64,18 @@ const localStoragePersister = createWebStoragePersister({ ## 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,8 +109,8 @@ 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'; @@ -118,7 +118,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 2b48c08790..c7c0c03874 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. @@ -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, }) diff --git a/examples/react/offline/src/App.js b/examples/react/offline/src/App.js index 7eaf3ac4e7..523211a037 100644 --- a/examples/react/offline/src/App.js +++ b/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, }); diff --git a/package.json b/package.json index 9e1f20d09a..760ebeae6e 100644 --- a/package.json +++ b/package.json @@ -2,13 +2,13 @@ "private": true, "repository": "https://github.com/tanstack/query.git", "scripts": { - "install:csb": "npm run install --frozen-lockfile && node ./scripts/fix-package-json.js", + "install:csb": "npm install --frozen-lockfile && node ./scripts/fix-package-json.js", "test": "(is-ci && npm run test:ci) || npm run test:dev", "test:ci": "npm run compile && npm run test:format && npm run test:eslint && npm run test:jest", "test:dev": "npm run compile && npm run test:format && npm run test:eslint && npm run test:jest:dev", "test:dev:17": "REACTJS_VERSION=17 jest --watch", "test:eslint": "lerna run test:eslint --stream --no-bail", - "test:format": "npm run prettier --check", + "test:format": "npm run prettier -- --check", "test:jest": "lerna run test:codemods --stream --no-bail && jest --config ./jest.config.ts", "test:jest:dev": "jest --config ./jest.config.ts --watch", "test:size": "npm run build && bundlewatch", @@ -18,7 +18,8 @@ "linkAll": "lerna exec 'npm run link' --parallel", "unlinkAll": "lerna exec 'npm run unlink' --parallel", "dev": "npm run watch", - "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json}\" --write", + "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json}\"", + "prettier:write": "npm run prettier -- --write", "visualize": "lerna exec 'open build/stats-html.html'", "cipublish": "ts-node scripts/publish.ts", "compile": "lerna run compile --stream --no-bail" diff --git a/packages/query-sync-storage-persister/src/__tests__/storageIsFull.test.ts b/packages/query-sync-storage-persister/src/__tests__/storageIsFull.test.ts index be509b56a7..21d2ae694f 100644 --- a/packages/query-sync-storage-persister/src/__tests__/storageIsFull.test.ts +++ b/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) }) }) diff --git a/packages/query-sync-storage-persister/src/index.ts b/packages/query-sync-storage-persister/src/index.ts index 25954ebd59..ea16c877ec 100644 --- a/packages/query-sync-storage-persister/src/index.ts +++ b/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 { diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx index 7c0356f9d6..88c994eb39 100644 --- a/packages/react-query/src/__tests__/useQuery.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.test.tsx @@ -2866,6 +2866,7 @@ describe('useQuery', () => { fallbackRender={({ error }) => (
error boundary
+ {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
{error?.message}
)}