diff --git a/createLocalStoragePersistor-experimental/package.json b/createLocalStoragePersistor-experimental/package.json deleted file mode 100644 index 065da05ad6..0000000000 --- a/createLocalStoragePersistor-experimental/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "internal": true, - "main": "../lib/createLocalStoragePersistor-experimental/index.js", - "module": "../es/createLocalStoragePersistor-experimental/index.js", - "types": "../types/createLocalStoragePersistor-experimental/index.d.ts" -} diff --git a/createWebStoragePersistor-experimental/package.json b/createWebStoragePersistor-experimental/package.json new file mode 100644 index 0000000000..2f4a1486c3 --- /dev/null +++ b/createWebStoragePersistor-experimental/package.json @@ -0,0 +1,6 @@ +{ + "internal": true, + "main": "../lib/createWebStoragePersistor-experimental/index.js", + "module": "../es/createWebStoragePersistor-experimental/index.js", + "types": "../types/createWebStoragePersistor-experimental/index.d.ts" +} diff --git a/docs/src/manifests/manifest.json b/docs/src/manifests/manifest.json index 84c03c719c..5d23536b78 100644 --- a/docs/src/manifests/manifest.json +++ b/docs/src/manifests/manifest.json @@ -308,9 +308,9 @@ "editUrl": "/plugins/persistQueryClient.md" }, { - "title": "createLocalStoragePersistor (Experimental)", - "path": "/plugins/createLocalStoragePersistor", - "editUrl": "/plugins/createLocalStoragePersistor.md" + "title": "createWebStoragePersistor (Experimental)", + "path": "/plugins/createWebStoragePersistor", + "editUrl": "/plugins/createWebStoragePersistor.md" }, { "title": "broadcastQueryClient (Experimental)", diff --git a/docs/src/pages/guides/migrating-to-react-query-3.md b/docs/src/pages/guides/migrating-to-react-query-3.md index ed5d42798e..5b57d1f0fc 100644 --- a/docs/src/pages/guides/migrating-to-react-query-3.md +++ b/docs/src/pages/guides/migrating-to-react-query-3.md @@ -20,7 +20,7 @@ Previous versions of React Query were awesome and brought some amazing new featu - Observe queries/mutations outside of React - Use the React Query core logic anywhere you want! - Bundled/Colocated Devtools via `react-query/devtools` -- Cache Persistence to localstorage (experimental via `react-query/persistQueryClient-experimental` and `react-query/createLocalStoragePersistor-experimental`) +- Cache Persistence to web storage (experimental via `react-query/persistQueryClient-experimental` and `react-query/createWebStoragePersistor-experimental`) ## Breaking Changes diff --git a/docs/src/pages/plugins/createLocalStoragePersistor.md b/docs/src/pages/plugins/createWebStoragePersistor.md similarity index 52% rename from docs/src/pages/plugins/createLocalStoragePersistor.md rename to docs/src/pages/plugins/createWebStoragePersistor.md index d0005e5b0e..eab1b96435 100644 --- a/docs/src/pages/plugins/createLocalStoragePersistor.md +++ b/docs/src/pages/plugins/createWebStoragePersistor.md @@ -1,23 +1,23 @@ --- -id: createLocalStoragePersistor -title: createLocalStoragePersistor (Experimental) +id: createWebStoragePersistor +title: createWebStoragePersistor (Experimental) --- > 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/createLocalStoragePersistor-experimental` import. +This utility comes packaged with `react-query` and is available under the `react-query/createWebStoragePersistor-experimental` import. ## Usage -- Import the `createLocalStoragePersistor` function -- Create a new localStoragePersistor +- Import the `createWebStoragePersistor` function +- Create a new webStoragePersistor - Pass it to the [`persistQueryClient`](../persistQueryClient) function ```ts import { persistQueryClient } from 'react-query/persistQueryClient-experimental' -import { createLocalStoragePersistor } from 'react-query/createLocalStoragePersistor-experimental' +import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' const queryClient = new QueryClient({ defaultOptions: { @@ -27,7 +27,8 @@ const queryClient = new QueryClient({ }, }) -const localStoragePersistor = createLocalStoragePersistor() +const localStoragePersistor = createWebStoragePersistor({storage: window.localStorage}) +// const sessionStoragePersistor = createWebStoragePersistor({storage: window.sessionStorage}) persistQueryClient({ queryClient, @@ -37,12 +38,12 @@ persistQueryClient({ ## API -### `createLocalStoragePersistor` +### `createWebStoragePersistor` -Call this function (with an optional options object) to create a localStoragePersistor that you can use later with `persisteQueryClient`. +Call this function (with an optional options object) to create a webStoragePersistor that you can use later with `persistQueryClient`. ```js -createLocalStoragePersistor(options?: CreateLocalStoragePersistorOptions) +createWebStoragePersistor(options?: CreateWebStoragePersistorOptions) ``` ### `Options` @@ -50,10 +51,12 @@ createLocalStoragePersistor(options?: CreateLocalStoragePersistorOptions) An optional object of options: ```js -interface CreateLocalStoragePersistorOptions { - /** The key to use when storing the cache to localstorage */ - localStorageKey?: string - /** To avoid localstorage spamming, +interface CreateWebStoragePersistorOptions { + /** 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 */ + key?: string + /** To avoid spamming, * pass a time in ms to throttle saving the cache to disk */ throttleTime?: number } @@ -63,7 +66,7 @@ The default options are: ```js { - localStorageKey = `REACT_QUERY_OFFLINE_CACHE`, + key = `REACT_QUERY_OFFLINE_CACHE`, throttleTime = 1000, } ``` diff --git a/docs/src/pages/plugins/persistQueryClient.md b/docs/src/pages/plugins/persistQueryClient.md index cadf18267b..d928e04dd3 100644 --- a/docs/src/pages/plugins/persistQueryClient.md +++ b/docs/src/pages/plugins/persistQueryClient.md @@ -9,7 +9,7 @@ title: persistQueryClient (Experimental) ## Officially Supported Persistors -- [createLocalStoragePersistor (Experimental)](/plugins/createLocalStoragePersistor) +- [createWebStoragePersistor (Experimental)](/plugins/createWebStoragePersistor) ## Installation @@ -21,7 +21,7 @@ Import the `persistQueryClient` function, and pass it your `QueryClient` instanc ```ts import { persistQueryClient } from 'react-query/persistQueryClient-experimental' -import { createLocalStoragePersistor } from 'react-query/createLocalStoragePersistor-experimental' +import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' const queryClient = new QueryClient({ defaultOptions: { @@ -31,7 +31,7 @@ const queryClient = new QueryClient({ }, }) -const localStoragePersistor = createLocalStoragePersistor() +const localStoragePersistor = createWebStoragePersistor({storage: window.localStorage}) persistQueryClient({ queryClient, diff --git a/package.json b/package.json index d20ebcfb5a..bb919c3ccd 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "hydration", "devtools", "persistQueryClient-experimental", - "createLocalStoragePersistor-experimental", + "createWebStoragePersistor-experimental", "broadcastQueryClient-experimental", "lib", "react", diff --git a/rollup.config.js b/rollup.config.js index d022876536..4e387b8988 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -26,9 +26,9 @@ const inputSrcs = [ 'persistQueryClient-experimental', ], [ - 'src/createLocalStoragePersistor-experimental/index.ts', - 'ReactQueryCreateLocalStoragePersistorExperimental', - 'createLocalStoragePersistor-experimental', + 'src/createWebStoragePersistor-experimental/index.ts', + 'ReactQueryCreateWebStoragePersistorExperimental', + 'createWebStoragePersistor-experimental', ], [ 'src/broadcastQueryClient-experimental/index.ts', diff --git a/src/createLocalStoragePersistor-experimental/index.ts b/src/createWebStoragePersistor-experimental/index.ts similarity index 61% rename from src/createLocalStoragePersistor-experimental/index.ts rename to src/createWebStoragePersistor-experimental/index.ts index 6d3fe0e7f7..0dfe4f5546 100644 --- a/src/createLocalStoragePersistor-experimental/index.ts +++ b/src/createWebStoragePersistor-experimental/index.ts @@ -1,25 +1,28 @@ import { noop } from '../core/utils' import { PersistedClient, Persistor } from '../persistQueryClient-experimental' -interface CreateLocalStoragePersistorOptions { - /** The key to use when storing the cache to localstorage */ - localStorageKey?: string - /** To avoid localstorage spamming, +interface CreateWebStoragePersistorOptions { + /** The storage client used for setting an retrieving items from cache */ + storage: Storage + /** 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 } -export function createLocalStoragePersistor({ - localStorageKey = `REACT_QUERY_OFFLINE_CACHE`, +export function createWebStoragePersistor({ + storage, + key = `REACT_QUERY_OFFLINE_CACHE`, throttleTime = 1000, -}: CreateLocalStoragePersistorOptions = {}): Persistor { - if (typeof localStorage !== 'undefined') { +}: CreateWebStoragePersistorOptions): Persistor { + if (typeof storage !== 'undefined') { return { persistClient: throttle(persistedClient => { - localStorage.setItem(localStorageKey, JSON.stringify(persistedClient)) + storage.setItem(key, JSON.stringify(persistedClient)) }, throttleTime), restoreClient: () => { - const cacheString = localStorage.getItem(localStorageKey) + const cacheString = storage.getItem(key) if (!cacheString) { return @@ -28,7 +31,7 @@ export function createLocalStoragePersistor({ return JSON.parse(cacheString) as PersistedClient }, removeClient: () => { - localStorage.removeItem(localStorageKey) + storage.removeItem(key) }, } } diff --git a/tsconfig.types.json b/tsconfig.types.json index d09c81e050..3d0c8ff748 100644 --- a/tsconfig.types.json +++ b/tsconfig.types.json @@ -14,7 +14,7 @@ "./src/hydration/index.ts", "./src/devtools/index.ts", "./src/persistQueryClient-experimental/index.ts", - "./src/createLocalStoragePersistor-experimental/index.ts", + "./src/createWebStoragePersistor-experimental/index.ts", "./src/broadcastQueryClient-experimental/index.ts" ], "exclude": ["./src/**/*"]