From c818572af7dde2f32b921f53f40e41b075ed1f51 Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Wed, 17 Nov 2021 19:22:41 +0530 Subject: [PATCH 1/8] :truck: Remove experimental from persist-query-client --- package.json | 2 +- persistQueryClient-experimental/package.json | 6 ------ persistQueryClient/package.json | 6 ++++++ rollup.config.js | 4 ++-- src/createAsyncStoragePersistor-experimental/index.ts | 2 +- src/createWebStoragePersistor-experimental/index.ts | 2 +- .../index.ts | 0 tsconfig.types.json | 2 +- 8 files changed, 12 insertions(+), 12 deletions(-) delete mode 100644 persistQueryClient-experimental/package.json create mode 100644 persistQueryClient/package.json rename src/{persistQueryClient-experimental => persistQueryClient}/index.ts (100%) diff --git a/package.json b/package.json index 560a5dcec6..599bbaacb2 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "es", "hydration", "devtools", - "persistQueryClient-experimental", + "persistQueryClient", "createWebStoragePersistor-experimental", "createAsyncStoragePersistor-experimental", "broadcastQueryClient-experimental", diff --git a/persistQueryClient-experimental/package.json b/persistQueryClient-experimental/package.json deleted file mode 100644 index f58433722d..0000000000 --- a/persistQueryClient-experimental/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "internal": true, - "main": "../lib/persistQueryClient-experimental/index.js", - "module": "../es/persistQueryClient-experimental/index.js", - "types": "../types/persistQueryClient-experimental/index.d.ts" -} diff --git a/persistQueryClient/package.json b/persistQueryClient/package.json new file mode 100644 index 0000000000..576ea12afb --- /dev/null +++ b/persistQueryClient/package.json @@ -0,0 +1,6 @@ +{ + "internal": true, + "main": "../lib/persistQueryClient/index.js", + "module": "../es/persistQueryClient/index.js", + "types": "../types/persistQueryClient/index.d.ts" +} diff --git a/rollup.config.js b/rollup.config.js index f11400c4c2..ea050c50f0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -20,9 +20,9 @@ const inputSrcs = [ ['src/core/index.ts', 'ReactQueryCore', 'react-query-core'], ['src/devtools/index.ts', 'ReactQueryDevtools', 'react-query-devtools'], [ - 'src/persistQueryClient-experimental/index.ts', + 'src/persistQueryClient/index.ts', 'ReactQueryPersistQueryClientExperimental', - 'persistQueryClient-experimental', + 'persistQueryClient', ], [ 'src/createWebStoragePersistor-experimental/index.ts', diff --git a/src/createAsyncStoragePersistor-experimental/index.ts b/src/createAsyncStoragePersistor-experimental/index.ts index a9d43a3c76..5b6837129b 100644 --- a/src/createAsyncStoragePersistor-experimental/index.ts +++ b/src/createAsyncStoragePersistor-experimental/index.ts @@ -1,4 +1,4 @@ -import { PersistedClient, Persistor } from '../persistQueryClient-experimental' +import { PersistedClient, Persistor } from '../persistQueryClient' interface AsyncStorage { getItem: (key: string) => Promise diff --git a/src/createWebStoragePersistor-experimental/index.ts b/src/createWebStoragePersistor-experimental/index.ts index 5c4b8a0de6..724f43851a 100644 --- a/src/createWebStoragePersistor-experimental/index.ts +++ b/src/createWebStoragePersistor-experimental/index.ts @@ -1,5 +1,5 @@ import { noop } from '../core/utils' -import { PersistedClient, Persistor } from '../persistQueryClient-experimental' +import { PersistedClient, Persistor } from '../persistQueryClient' interface CreateWebStoragePersistorOptions { /** The storage client used for setting an retrieving items from cache */ diff --git a/src/persistQueryClient-experimental/index.ts b/src/persistQueryClient/index.ts similarity index 100% rename from src/persistQueryClient-experimental/index.ts rename to src/persistQueryClient/index.ts diff --git a/tsconfig.types.json b/tsconfig.types.json index 820f702ad9..7e18d97f68 100644 --- a/tsconfig.types.json +++ b/tsconfig.types.json @@ -12,7 +12,7 @@ "files": [ "./src/index.ts", "./src/devtools/index.ts", - "./src/persistQueryClient-experimental/index.ts", + "./src/persistQueryClient/index.ts", "./src/createWebStoragePersistor-experimental/index.ts", "./src/createAsyncStoragePersistor-experimental/index.ts", "./src/broadcastQueryClient-experimental/index.ts", From 36c3e820dc0324aa57b53a1b174e30561778cd2c Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Wed, 17 Nov 2021 19:42:15 +0530 Subject: [PATCH 2/8] :truck: Rename persistor -> persister --- src/persistQueryClient/index.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/persistQueryClient/index.ts b/src/persistQueryClient/index.ts index 6a9df26327..8380228d50 100644 --- a/src/persistQueryClient/index.ts +++ b/src/persistQueryClient/index.ts @@ -9,7 +9,7 @@ import { } from 'react-query' import { Promisable } from 'type-fest' -export interface Persistor { +export interface Persister { persistClient(persistClient: PersistedClient): Promisable restoreClient(): Promisable removeClient(): Promisable @@ -24,9 +24,9 @@ export interface PersistedClient { export interface PersistQueryClientOptions { /** The QueryClient to persist */ queryClient: QueryClient - /** The Persistor interface for storing and restoring the cache + /** The Persister interface for storing and restoring the cache * to/from a persisted location */ - persistor: Persistor + persister: Persister /** The max-allowed age of the cache. * If a persisted cache is found that is older than this * time, it will be discarded */ @@ -42,7 +42,7 @@ export interface PersistQueryClientOptions { export async function persistQueryClient({ queryClient, - persistor, + persister, maxAge = 1000 * 60 * 60 * 24, buster = '', hydrateOptions, @@ -57,24 +57,24 @@ export async function persistQueryClient({ clientState: dehydrate(queryClient, dehydrateOptions), } - persistor.persistClient(persistClient) + persister.persistClient(persistClient) } // Attempt restore try { - const persistedClient = await persistor.restoreClient() + const persistedClient = await persister.restoreClient() if (persistedClient) { if (persistedClient.timestamp) { const expired = Date.now() - persistedClient.timestamp > maxAge const busted = persistedClient.buster !== buster if (expired || busted) { - persistor.removeClient() + persister.removeClient() } else { hydrate(queryClient, persistedClient.clientState, hydrateOptions) } } else { - persistor.removeClient() + persister.removeClient() } } } catch (err) { @@ -82,7 +82,7 @@ export async function persistQueryClient({ getLogger().warn( 'Encountered an error attempting to restore client cache from persisted location. As a precaution, the persisted cache will be discarded.' ) - persistor.removeClient() + persister.removeClient() } // Subscribe to changes in the query cache to trigger the save From 4d90c6c49fbe517cdd170b69dca24862be961956 Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Wed, 17 Nov 2021 19:48:19 +0530 Subject: [PATCH 3/8] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20=20Fix=20Persistor=20-?= =?UTF-8?q?>=20Persister=20in=20imports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/createAsyncStoragePersistor-experimental/index.ts | 4 ++-- src/createWebStoragePersistor-experimental/index.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/createAsyncStoragePersistor-experimental/index.ts b/src/createAsyncStoragePersistor-experimental/index.ts index 5b6837129b..4e1f98a375 100644 --- a/src/createAsyncStoragePersistor-experimental/index.ts +++ b/src/createAsyncStoragePersistor-experimental/index.ts @@ -1,4 +1,4 @@ -import { PersistedClient, Persistor } from '../persistQueryClient' +import { PersistedClient, Persister } from '../persistQueryClient' interface AsyncStorage { getItem: (key: string) => Promise @@ -32,7 +32,7 @@ export const createAsyncStoragePersistor = ({ throttleTime = 1000, serialize = JSON.stringify, deserialize = JSON.parse, -}: CreateAsyncStoragePersistorOptions): Persistor => { +}: CreateAsyncStoragePersistorOptions): Persister => { return { persistClient: asyncThrottle( persistedClient => storage.setItem(key, serialize(persistedClient)), diff --git a/src/createWebStoragePersistor-experimental/index.ts b/src/createWebStoragePersistor-experimental/index.ts index 724f43851a..e0b99f3ea8 100644 --- a/src/createWebStoragePersistor-experimental/index.ts +++ b/src/createWebStoragePersistor-experimental/index.ts @@ -1,5 +1,5 @@ import { noop } from '../core/utils' -import { PersistedClient, Persistor } from '../persistQueryClient' +import { PersistedClient, Persister } from '../persistQueryClient' interface CreateWebStoragePersistorOptions { /** The storage client used for setting an retrieving items from cache */ @@ -27,7 +27,7 @@ export function createWebStoragePersistor({ throttleTime = 1000, serialize = JSON.stringify, deserialize = JSON.parse, -}: CreateWebStoragePersistorOptions): Persistor { +}: CreateWebStoragePersistorOptions): Persister { //try to save data to storage function trySave(persistedClient: PersistedClient) { try { From 9dd37927ee4118b5ed23a394b5fde2deb13fd3cd Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Wed, 17 Nov 2021 20:00:08 +0530 Subject: [PATCH 4/8] :truck: Update name in rollup config --- rollup.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index ea050c50f0..5fb42c4347 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -21,7 +21,7 @@ const inputSrcs = [ ['src/devtools/index.ts', 'ReactQueryDevtools', 'react-query-devtools'], [ 'src/persistQueryClient/index.ts', - 'ReactQueryPersistQueryClientExperimental', + 'ReactQueryPersistQueryClient', 'persistQueryClient', ], [ From a999ab8138fd3de62341592a39351540b6b55f06 Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Thu, 18 Nov 2021 19:15:54 +0530 Subject: [PATCH 5/8] :truck: Move createAsyncStoragePersister and createWebStoragePersister to stable version and rename persistor -> persister --- createAsyncStoragePersister/package.json | 6 +++++ .../package.json | 6 ----- createWebStoragePersister/package.json | 6 +++++ .../package.json | 6 ----- examples/basic/src/index.js | 17 +++++++++++- package.json | 4 +-- rollup.config.js | 12 ++++----- .../index.ts | 6 ++--- .../index.ts | 6 ++--- .../tests/storageIsFull.test.ts | 26 +++++++++---------- tsconfig.types.json | 4 +-- 11 files changed, 57 insertions(+), 42 deletions(-) create mode 100644 createAsyncStoragePersister/package.json delete mode 100644 createAsyncStoragePersistor-experimental/package.json create mode 100644 createWebStoragePersister/package.json delete mode 100644 createWebStoragePersistor-experimental/package.json rename src/{createAsyncStoragePersistor-experimental => createAsyncStoragePersister}/index.ts (94%) rename src/{createWebStoragePersistor-experimental => createWebStoragePersister}/index.ts (95%) rename src/{createWebStoragePersistor-experimental => createWebStoragePersister}/tests/storageIsFull.test.ts (87%) diff --git a/createAsyncStoragePersister/package.json b/createAsyncStoragePersister/package.json new file mode 100644 index 0000000000..4d74825ea3 --- /dev/null +++ b/createAsyncStoragePersister/package.json @@ -0,0 +1,6 @@ +{ + "internal": true, + "main": "../lib/createAsyncStoragePersister/index.js", + "module": "../es/createAsyncStoragePersister/index.js", + "types": "../types/createAsyncStoragePersister/index.d.ts" +} diff --git a/createAsyncStoragePersistor-experimental/package.json b/createAsyncStoragePersistor-experimental/package.json deleted file mode 100644 index 6a1bf0b2cb..0000000000 --- a/createAsyncStoragePersistor-experimental/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "internal": true, - "main": "../lib/createAsyncStoragePersistor-experimental/index.js", - "module": "../es/createAsyncStoragePersistor-experimental/index.js", - "types": "../types/createAsyncStoragePersistor-experimental/index.d.ts" -} diff --git a/createWebStoragePersister/package.json b/createWebStoragePersister/package.json new file mode 100644 index 0000000000..21c28c7658 --- /dev/null +++ b/createWebStoragePersister/package.json @@ -0,0 +1,6 @@ +{ + "internal": true, + "main": "../lib/createWebStoragePersister/index.js", + "module": "../es/createWebStoragePersister/index.js", + "types": "../types/createWebStoragePersister/index.d.ts" +} diff --git a/createWebStoragePersistor-experimental/package.json b/createWebStoragePersistor-experimental/package.json deleted file mode 100644 index 2f4a1486c3..0000000000 --- a/createWebStoragePersistor-experimental/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "internal": true, - "main": "../lib/createWebStoragePersistor-experimental/index.js", - "module": "../es/createWebStoragePersistor-experimental/index.js", - "types": "../types/createWebStoragePersistor-experimental/index.d.ts" -} diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js index 722e2bcc7c..019d856875 100644 --- a/examples/basic/src/index.js +++ b/examples/basic/src/index.js @@ -9,8 +9,23 @@ import { QueryClientProvider, } from "react-query"; import { ReactQueryDevtools } from "react-query/devtools"; +import { persistQueryClient } from 'react-query/persistQueryClient'; +import { createWebStoragePersister } from 'react-query/createWebStoragePersister' -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + cacheTime: 1000 * 60 * 60 * 24, // 24 hours + }, + }, +}) + +const localStoragePersister = createWebStoragePersister({storage: window.localStorage}) + +persistQueryClient({ + queryClient, + persister: localStoragePersister, +}) function App() { const [postId, setPostId] = React.useState(-1); diff --git a/package.json b/package.json index 599bbaacb2..345a58c63b 100644 --- a/package.json +++ b/package.json @@ -56,8 +56,8 @@ "hydration", "devtools", "persistQueryClient", - "createWebStoragePersistor-experimental", - "createAsyncStoragePersistor-experimental", + "createWebStoragePersister", + "createAsyncStoragePersister", "broadcastQueryClient-experimental", "lib", "react", diff --git a/rollup.config.js b/rollup.config.js index 5fb42c4347..35fdd215aa 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -25,14 +25,14 @@ const inputSrcs = [ 'persistQueryClient', ], [ - 'src/createWebStoragePersistor-experimental/index.ts', - 'ReactQueryCreateWebStoragePersistorExperimental', - 'createWebStoragePersistor-experimental', + 'src/createWebStoragePersister/index.ts', + 'ReactQueryCreateWebStoragePersister', + 'createWebStoragePersister', ], [ - 'src/createAsyncStoragePersistor-experimental/index.ts', - 'ReactQueryCreateAsyncStoragePersistorExperimental', - 'createAsyncStoragePersistor-experimental', + 'src/createAsyncStoragePersister/index.ts', + 'ReactQueryCreateAsyncStoragePersister', + 'createAsyncStoragePersister', ], [ 'src/broadcastQueryClient-experimental/index.ts', diff --git a/src/createAsyncStoragePersistor-experimental/index.ts b/src/createAsyncStoragePersister/index.ts similarity index 94% rename from src/createAsyncStoragePersistor-experimental/index.ts rename to src/createAsyncStoragePersister/index.ts index 4e1f98a375..96731076c6 100644 --- a/src/createAsyncStoragePersistor-experimental/index.ts +++ b/src/createAsyncStoragePersister/index.ts @@ -6,7 +6,7 @@ interface AsyncStorage { removeItem: (key: string) => Promise } -interface CreateAsyncStoragePersistorOptions { +interface CreateAsyncStoragePersisterOptions { /** The storage client used for setting an retrieving items from cache */ storage: AsyncStorage /** The key to use when storing the cache */ @@ -26,13 +26,13 @@ interface CreateAsyncStoragePersistorOptions { deserialize?: (cachedString: string) => PersistedClient } -export const createAsyncStoragePersistor = ({ +export const createAsyncStoragePersister = ({ storage, key = `REACT_QUERY_OFFLINE_CACHE`, throttleTime = 1000, serialize = JSON.stringify, deserialize = JSON.parse, -}: CreateAsyncStoragePersistorOptions): Persister => { +}: CreateAsyncStoragePersisterOptions): Persister => { return { persistClient: asyncThrottle( persistedClient => storage.setItem(key, serialize(persistedClient)), diff --git a/src/createWebStoragePersistor-experimental/index.ts b/src/createWebStoragePersister/index.ts similarity index 95% rename from src/createWebStoragePersistor-experimental/index.ts rename to src/createWebStoragePersister/index.ts index e0b99f3ea8..e2f61c1d65 100644 --- a/src/createWebStoragePersistor-experimental/index.ts +++ b/src/createWebStoragePersister/index.ts @@ -1,7 +1,7 @@ import { noop } from '../core/utils' import { PersistedClient, Persister } from '../persistQueryClient' -interface CreateWebStoragePersistorOptions { +interface CreateWebStoragePersisterOptions { /** The storage client used for setting an retrieving items from cache */ storage: Storage /** The key to use when storing the cache */ @@ -21,13 +21,13 @@ interface CreateWebStoragePersistorOptions { deserialize?: (cachedString: string) => PersistedClient } -export function createWebStoragePersistor({ +export function createWebStoragePersister({ storage, key = `REACT_QUERY_OFFLINE_CACHE`, throttleTime = 1000, serialize = JSON.stringify, deserialize = JSON.parse, -}: CreateWebStoragePersistorOptions): Persister { +}: CreateWebStoragePersisterOptions): Persister { //try to save data to storage function trySave(persistedClient: PersistedClient) { try { diff --git a/src/createWebStoragePersistor-experimental/tests/storageIsFull.test.ts b/src/createWebStoragePersister/tests/storageIsFull.test.ts similarity index 87% rename from src/createWebStoragePersistor-experimental/tests/storageIsFull.test.ts rename to src/createWebStoragePersister/tests/storageIsFull.test.ts index 2b19a1d45b..608e078ffe 100644 --- a/src/createWebStoragePersistor-experimental/tests/storageIsFull.test.ts +++ b/src/createWebStoragePersister/tests/storageIsFull.test.ts @@ -1,6 +1,6 @@ import { dehydrate, MutationCache, QueryCache, QueryClient } from '../../core' import { sleep } from '../../react/tests/utils' -import { createWebStoragePersistor } from '../index' +import { createWebStoragePersister } from '../index' function getMockStorage(limitSize?: number) { const dataSet = new Map() @@ -33,14 +33,14 @@ function getMockStorage(limitSize?: number) { } as any) as Storage } -describe('createWebStoragePersistor ', () => { +describe('createWebStoragePersister ', () => { test('basic store and recover', async () => { const queryCache = new QueryCache() const mutationCache = new MutationCache() const queryClient = new QueryClient({ queryCache, mutationCache }) const storage = getMockStorage() - const webStoragePersistor = createWebStoragePersistor({ + const webStoragePersister = createWebStoragePersister({ throttleTime: 0, storage, }) @@ -58,9 +58,9 @@ describe('createWebStoragePersistor ', () => { timestamp: Date.now(), clientState: dehydrate(queryClient), } - webStoragePersistor.persistClient(persistClient) + webStoragePersister.persistClient(persistClient) await sleep(1) - const restoredClient = await webStoragePersistor.restoreClient() + const restoredClient = await webStoragePersister.restoreClient() expect(restoredClient).toEqual(persistClient) }) @@ -71,7 +71,7 @@ describe('createWebStoragePersistor ', () => { const N = 2000 const storage = getMockStorage(N * 5) // can save 4 items; - const webStoragePersistor = createWebStoragePersistor({ + const webStoragePersister = createWebStoragePersister({ throttleTime: 0, storage, }) @@ -92,9 +92,9 @@ describe('createWebStoragePersistor ', () => { timestamp: Date.now(), clientState: dehydrate(queryClient), } - webStoragePersistor.persistClient(persistClient) + webStoragePersister.persistClient(persistClient) await sleep(10) - const restoredClient = await webStoragePersistor.restoreClient() + const restoredClient = await webStoragePersister.restoreClient() expect(restoredClient?.clientState.queries.length).toEqual(4) expect( restoredClient?.clientState.queries.find(q => q.queryKey === 'A') @@ -110,9 +110,9 @@ describe('createWebStoragePersistor ', () => { timestamp: Date.now(), clientState: dehydrate(queryClient), } - webStoragePersistor.persistClient(updatedPersistClient) + webStoragePersister.persistClient(updatedPersistClient) await sleep(10) - const restoredClient2 = await webStoragePersistor.restoreClient() + const restoredClient2 = await webStoragePersister.restoreClient() expect(restoredClient2?.clientState.queries.length).toEqual(4) expect( restoredClient2?.clientState.queries.find(q => q.queryKey === 'A') @@ -129,7 +129,7 @@ describe('createWebStoragePersistor ', () => { const N = 2000 const storage = getMockStorage(N * 5) // can save 4 items; - const webStoragePersistor = createWebStoragePersistor({ + const webStoragePersister = createWebStoragePersister({ throttleTime: 0, storage, }) @@ -163,9 +163,9 @@ describe('createWebStoragePersistor ', () => { timestamp: Date.now(), clientState: dehydrate(queryClient), } - webStoragePersistor.persistClient(persistClient) + webStoragePersister.persistClient(persistClient) await sleep(10) - const restoredClient = await webStoragePersistor.restoreClient() + const restoredClient = await webStoragePersister.restoreClient() expect(restoredClient?.clientState.mutations.length).toEqual(1) expect(restoredClient?.clientState.queries.length).toEqual(3) expect( diff --git a/tsconfig.types.json b/tsconfig.types.json index 7e18d97f68..6f6510ecd5 100644 --- a/tsconfig.types.json +++ b/tsconfig.types.json @@ -13,8 +13,8 @@ "./src/index.ts", "./src/devtools/index.ts", "./src/persistQueryClient/index.ts", - "./src/createWebStoragePersistor-experimental/index.ts", - "./src/createAsyncStoragePersistor-experimental/index.ts", + "./src/createWebStoragePersister/index.ts", + "./src/createAsyncStoragePersister/index.ts", "./src/broadcastQueryClient-experimental/index.ts", "./src/ts3.8/index.ts" ], From 54d40135e83bdab3c00c8d0edeb6c3c872ea0214 Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Thu, 18 Nov 2021 19:40:14 +0530 Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=93=9D=20=20Update=20documentation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/manifests/manifest.json | 14 +++--- ...stor.md => createAsyncStoragePersister.md} | 28 ++++++----- ...sistor.md => createWebStoragePersister.md} | 30 ++++++------ docs/src/pages/plugins/persistQueryClient.md | 46 +++++++++---------- 4 files changed, 56 insertions(+), 62 deletions(-) rename docs/src/pages/plugins/{createAsyncStoragePersistor.md => createAsyncStoragePersister.md} (62%) rename docs/src/pages/plugins/{createWebStoragePersistor.md => createWebStoragePersister.md} (54%) diff --git a/docs/src/manifests/manifest.json b/docs/src/manifests/manifest.json index 1c97c82318..c0347bf931 100644 --- a/docs/src/manifests/manifest.json +++ b/docs/src/manifests/manifest.json @@ -319,19 +319,19 @@ "heading": true, "routes": [ { - "title": "persistQueryClient (Experimental)", + "title": "persistQueryClient", "path": "/plugins/persistQueryClient", "editUrl": "/plugins/persistQueryClient.md" }, { - "title": "createWebStoragePersistor (Experimental)", - "path": "/plugins/createWebStoragePersistor", - "editUrl": "/plugins/createWebStoragePersistor.md" + "title": "createWebStoragePersister", + "path": "/plugins/createWebStoragePersister", + "editUrl": "/plugins/createWebStoragePersister.md" }, { - "title": "createAsyncStoragePersistor (Experimental)", - "path": "/plugins/createAsyncStoragePersistor", - "editUrl": "/plugins/createAsyncStoragePersistor.md" + "title": "createAsyncStoragePersister", + "path": "/plugins/createAsyncStoragePersister", + "editUrl": "/plugins/createAsyncStoragePersister.md" }, { "title": "broadcastQueryClient (Experimental)", diff --git a/docs/src/pages/plugins/createAsyncStoragePersistor.md b/docs/src/pages/plugins/createAsyncStoragePersister.md similarity index 62% rename from docs/src/pages/plugins/createAsyncStoragePersistor.md rename to docs/src/pages/plugins/createAsyncStoragePersister.md index 99f2a2d5f9..cdd8650b64 100644 --- a/docs/src/pages/plugins/createAsyncStoragePersistor.md +++ b/docs/src/pages/plugins/createAsyncStoragePersister.md @@ -1,25 +1,23 @@ --- -id: createAsyncStoragePersistor -title: createAsyncStoragePersistor (Experimental) +id: createAsyncStoragePersister +title: createAsyncStoragePersister --- -> VERY IMPORTANT: This utility is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages. - ## Installation -This utility comes packaged with `react-query` and is available under the `react-query/createAsyncStoragePersistor-experimental` import. +This utility comes packaged with `react-query` and is available under the `react-query/createAsyncStoragePersister` import. ## Usage -- Import the `createAsyncStoragePersistor` function -- Create a new asyncStoragePersistor +- Import the `createAsyncStoragePersister` function +- Create a new asyncStoragePersister - you can pass any `storage` to it that adheres to the `AsyncStorage` interface - the example below uses the async-storage from React Native - Pass it to the [`persistQueryClient`](./persistQueryClient) function ```ts import AsyncStorage from '@react-native-async-storage/async-storage' -import { persistQueryClient } from 'react-query/persistQueryClient-experimental' -import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental' +import { persistQueryClient } from 'react-query/persistQueryClient' +import { createAsyncStoragePersister } from 'react-query/createAsyncStoragePersister' const queryClient = new QueryClient({ defaultOptions: { @@ -29,30 +27,30 @@ const queryClient = new QueryClient({ }, }) -const asyncStoragePersistor = createAsyncStoragePersistor({ +const asyncStoragePersister = createAsyncStoragePersister({ storage: AsyncStorage }) persistQueryClient({ queryClient, - persistor: asyncStoragePersistor, + persister: asyncStoragePersister, }) ``` ## API -### `createAsyncStoragePersistor` +### `createAsyncStoragePersister` -Call this function to create an asyncStoragePersistor that you can use later with `persistQueryClient`. +Call this function to create an asyncStoragePersister that you can use later with `persistQueryClient`. ```js -createAsyncStoragePersistor(options: CreateAsyncStoragePersistorOptions) +createAsyncStoragePersister(options: CreateAsyncStoragePersisterOptions) ``` ### `Options` ```ts -interface CreateAsyncStoragePersistorOptions { +interface CreateAsyncStoragePersisterOptions { /** The storage client used for setting an retrieving items from cache */ storage: AsyncStorage /** The key to use when storing the cache to localStorage */ diff --git a/docs/src/pages/plugins/createWebStoragePersistor.md b/docs/src/pages/plugins/createWebStoragePersister.md similarity index 54% rename from docs/src/pages/plugins/createWebStoragePersistor.md rename to docs/src/pages/plugins/createWebStoragePersister.md index 983ac336bf..58f9d93168 100644 --- a/docs/src/pages/plugins/createWebStoragePersistor.md +++ b/docs/src/pages/plugins/createWebStoragePersister.md @@ -1,23 +1,21 @@ --- -id: createWebStoragePersistor -title: createWebStoragePersistor (Experimental) +id: createWebStoragePersister +title: createWebStoragePersister --- -> VERY IMPORTANT: This utility is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages. - ## Installation -This utility comes packaged with `react-query` and is available under the `react-query/createWebStoragePersistor-experimental` import. +This utility comes packaged with `react-query` and is available under the `react-query/createWebStoragePersister` import. ## Usage -- Import the `createWebStoragePersistor` function -- Create a new webStoragePersistor +- Import the `createWebStoragePersister` function +- Create a new webStoragePersister - Pass it to the [`persistQueryClient`](./persistQueryClient) function ```ts -import { persistQueryClient } from 'react-query/persistQueryClient-experimental' -import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' +import { persistQueryClient } from 'react-query/persistQueryClient' +import { createWebStoragePersister } from 'react-query/createWebStoragePersister' const queryClient = new QueryClient({ defaultOptions: { @@ -27,29 +25,29 @@ const queryClient = new QueryClient({ }, }) -const localStoragePersistor = createWebStoragePersistor({ storage: window.localStorage }) -// const sessionStoragePersistor = createWebStoragePersistor({ storage: window.sessionStorage }) +const localStoragePersister = createWebStoragePersister({ storage: window.localStorage }) +// const sessionStoragePersister = createWebStoragePersister({ storage: window.sessionStorage }) persistQueryClient({ queryClient, - persistor: localStoragePersistor, + persister: localStoragePersister, }) ``` ## API -### `createWebStoragePersistor` +### `createWebStoragePersister` -Call this function to create a webStoragePersistor that you can use later with `persistQueryClient`. +Call this function to create a webStoragePersister that you can use later with `persistQueryClient`. ```js -createWebStoragePersistor(options: CreateWebStoragePersistorOptions) +createWebStoragePersister(options: CreateWebStoragePersisterOptions) ``` ### `Options` ```ts -interface CreateWebStoragePersistorOptions { +interface CreateWebStoragePersisterOptions { /** 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 */ diff --git a/docs/src/pages/plugins/persistQueryClient.md b/docs/src/pages/plugins/persistQueryClient.md index 1236d07867..969ea98804 100644 --- a/docs/src/pages/plugins/persistQueryClient.md +++ b/docs/src/pages/plugins/persistQueryClient.md @@ -1,28 +1,26 @@ --- id: persistQueryClient -title: persistQueryClient (Experimental) +title: persistQueryClient --- -> VERY IMPORTANT: This utility is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Use at your own risk. If you choose to rely on this in production in an experimental stage, please lock your version to a patch-level version to avoid unexpected breakages. +`persistQueryClient` is a utility for persisting the state of your queryClient and its caches for later use. Different **persisters** can be used to store your client and cache to many different storage layers. -`persistQueryClient` is a utility for persisting the state of your queryClient and its caches for later use. Different **persistors** can be used to store your client and cache to many different storage layers. +## Officially Supported Persisters -## Officially Supported Persistors - -- [createWebStoragePersistor (Experimental)](/plugins/createWebStoragePersistor) -- [createAsyncStoragePersistor (Experimental)](/plugins/createAsyncStoragePersistor) +- [createWebStoragePersister](/plugins/createWebStoragePersister) +- [createAsyncStoragePersister](/plugins/createAsyncStoragePersister) ## Installation -This utility comes packaged with `react-query` and is available under the `react-query/persistQueryClient-experimental` import. +This utility comes packaged with `react-query` and is available under the `react-query/persistQueryClient` import. ## Usage -Import the `persistQueryClient` function, and pass it your `QueryClient` instance (with a `cacheTime` set), and a Persistor interface (there are multiple persistor types you can use): +Import the `persistQueryClient` function, and pass it your `QueryClient` instance (with a `cacheTime` set), and a Persister interface (there are multiple persister types you can use): ```ts -import { persistQueryClient } from 'react-query/persistQueryClient-experimental' -import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' +import { persistQueryClient } from 'react-query/persistQueryClient' +import { createWebStoragePersister } from 'react-query/createWebStoragePersister' const queryClient = new QueryClient({ defaultOptions: { @@ -32,11 +30,11 @@ const queryClient = new QueryClient({ }, }) -const localStoragePersistor = createWebStoragePersistor({storage: window.localStorage}) +const localStoragePersister = createWebStoragePersister({storage: window.localStorage}) persistQueryClient({ queryClient, - persistor: localStoragePersistor, + persister: localStoragePersister, }) ``` @@ -52,11 +50,11 @@ You can also pass it `Infinity` to disable garbage collection behavior entirely. As you use your application: -- When your query/mutation cache is updated, it will be dehydrated and stored by the persistor you provided. **By default**, this action is throttled to happen at most every 1 second to save on potentially expensive writes to a persistor, but can be customized as you see fit. +- When your query/mutation cache is updated, it will be dehydrated and stored by the persister you provided. **By default**, this action is throttled to happen at most every 1 second to save on potentially expensive writes to a persister, but can be customized as you see fit. When you reload/bootstrap your app: -- Attempts to load a previously persisted dehydrated query/mutation cache from the persistor +- Attempts to load a previously persisted dehydrated query/mutation cache from the persister - If a cache is found that is older than the `maxAge` (which by default is 24 hours), it will be discarded. This can be customized as you see fit. ## Cache Busting @@ -64,17 +62,17 @@ When you reload/bootstrap your app: Sometimes you may make changes to your application or data that immediately invalidate any and all cached data. If and when this happens, you can pass a `buster` string option to `persistQueryClient`, and if the cache that is found does not also have that buster string, it will be discarded. ```ts -persistQueryClient({ queryClient, persistor, buster: buildHash }) +persistQueryClient({ queryClient, persister, buster: buildHash }) ``` ## API ### `persistQueryClient` -Pass this function a `QueryClient` instance and a persistor that will persist your cache. Both are **required** +Pass this function a `QueryClient` instance and a persister that will persist your cache. Both are **required** ```ts -persistQueryClient({ queryClient, persistor }) +persistQueryClient({ queryClient, persister }) ``` ### `Options` @@ -85,9 +83,9 @@ An object of options: interface PersistQueryClientOptions { /** The QueryClient to persist */ queryClient: QueryClient - /** The Persistor interface for storing and restoring the cache + /** The Persister interface for storing and restoring the cache * to/from a persisted location */ - persistor: Persistor + persister: Persister /** The max-allowed age of the cache. * If a persisted cache is found that is older than this * time, it will be discarded */ @@ -111,12 +109,12 @@ The default options are: } ``` -## Building a Persistor +## Building a Persister -Persistors have the following interface: +Persisters have the following interface: ```ts -export interface Persistor { +export interface Persister { persistClient(persistClient: PersistedClient): Promisable restoreClient(): Promisable removeClient(): Promisable @@ -133,4 +131,4 @@ export interface PersistedClient { } ``` -Satisfy all of these interfaces and you've got yourself a persistor! +Satisfy all of these interfaces and you've got yourself a persister! From 8453bd439ca2f7e9564cf5c38effb89556b975cb Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Thu, 18 Nov 2021 20:06:11 +0530 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=93=9D=20=20=20Add=20migrating=20to?= =?UTF-8?q?=20v4=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../guides/migrating-to-react-query-4.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/src/pages/guides/migrating-to-react-query-4.md b/docs/src/pages/guides/migrating-to-react-query-4.md index c3ec75d6cb..48b0ceffe4 100644 --- a/docs/src/pages/guides/migrating-to-react-query-4.md +++ b/docs/src/pages/guides/migrating-to-react-query-4.md @@ -93,3 +93,22 @@ For the same reason, those have also been combined: ``` This flag defaults to `active` because `refetchActive` defaulted to `true`. This means we also need a way to tell `invalidateQueries` to not refetch at all, which is why a fourth option (`none`) is also allowed here. + + +### `persistQueryClient` and its sister plugins are no longer expermental 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. + +Since these plugins are no longer experimental, there import paths have also been updated: + +```diff +- import { persistQueryClient } from 'react-query/persistQueryClient-experimental' +- import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' +- import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental' + ++ import { persistQueryClient } from 'react-query/persistQueryClient' ++ import { createWebStoragePersister } from 'react-query/createWebStoragePersister' ++ import { createAsyncStoragePersister } from 'react-query/createAsyncStoragePersister' +``` + + From ca368e4810979c4995a03c24b664ef6597474b23 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Thu, 18 Nov 2021 17:45:44 +0100 Subject: [PATCH 8/8] Apply suggestions from code review --- docs/src/pages/guides/migrating-to-react-query-4.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/guides/migrating-to-react-query-4.md b/docs/src/pages/guides/migrating-to-react-query-4.md index 842270cf7d..01a7d79c84 100644 --- a/docs/src/pages/guides/migrating-to-react-query-4.md +++ b/docs/src/pages/guides/migrating-to-react-query-4.md @@ -132,11 +132,11 @@ If you were importing anything from `'react-query/react'` directly in your proje + import { QueryClientProvider } from 'react-query/reactjs'; ``` -### `persistQueryClient` and its sister plugins are no longer expermental and have been renamed +### `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. -Since these plugins are no longer experimental, there import paths have also been updated: +Since these plugins are no longer experimental, their import paths have also been updated: ```diff - import { persistQueryClient } from 'react-query/persistQueryClient-experimental'