feat: session storage persistor

Author: CurtisHughes

createSessionStoragePersistor-experimental/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../lib/createSessionStoragePersistor-experimental/index.js",
+  "module": "../es/createSessionStoragePersistor-experimental/index.js",
+  "types": "../types/createSessionStoragePersistor-experimental/index.d.ts"
+}

docs/src/manifests/manifest.json

@@ -312,6 +312,11 @@
           "path": "/plugins/createLocalStoragePersistor",
           "editUrl": "/plugins/createLocalStoragePersistor.md"
         },
+        {
+          "title": "createSessionStoragePersistor (Experimental)",
+          "path": "/plugins/createSessionStoragePersistor",
+          "editUrl": "/plugins/createSessionStoragePersistor.md"
+        },
         {
           "title": "broadcastQueryClient (Experimental)",
           "path": "/plugins/broadcastQueryClient",

docs/src/pages/guides/migrating-to-react-query-3.md

@@ -21,6 +21,7 @@ Previous versions of React Query were awesome and brought some amazing new featu
 - 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 sessionstorage (experimental via `react-query/persistQueryClient-experimental` and `react-query/createSessionStoragePersistor-experimental`)
 
 ## Breaking Changes
 

docs/src/pages/plugins/createSessionStoragePersistor.md

@@ -0,0 +1,69 @@
+---
+id: createSessionStoragePersistor
+title: createSessionStoragePersistor (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/createSessionStoragePersistor-experimental` import.
+
+## Usage
+
+- Import the `createSessionStoragePersistor` function
+- Create a new sessionStoragePersistor
+- Pass it to the [`persistQueryClient`](../persistQueryClient) function
+
+```ts
+import { persistQueryClient } from 'react-query/persistQueryClient-experimental'
+import { createSessionStoragePersistor } from 'react-query/createSessionStoragePersistor-experimental'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+})
+
+const sessionStoragePersistor = createSessionStoragePersistor()
+
+persistQueryClient({
+  queryClient,
+  persistor: sessionStoragePersistor,
+})
+```
+
+## API
+
+### `createSessionStoragePersistor`
+
+Call this function (with an optional options object) to create a sessionStoragePersistor that you can use later with `persisteQueryClient`.
+
+```js
+createSessionStoragePersistor(options?: CreateSessionStoragePersistorOptions)
+```
+
+### `Options`
+
+An optional object of options:
+
+```js
+interface CreateSessionStoragePersistorOptions {
+  /** The key to use when storing the cache to sessionstorage */
+  sessionStorageKey?: string
+  /** To avoid sessionstorage spamming,
+   * pass a time in ms to throttle saving the cache to disk */
+  throttleTime?: number
+}
+```
+
+The default options are:
+
+```js
+{
+  sessionStorageKey = `REACT_QUERY_OFFLINE_CACHE`,
+  throttleTime = 1000,
+}
+```

docs/src/pages/plugins/persistQueryClient.md

@@ -10,6 +10,7 @@ title: persistQueryClient (Experimental)
 ## Officially Supported Persistors
 
 - [createLocalStoragePersistor (Experimental)](/plugins/createLocalStoragePersistor)
+- [createSessionStoragePersistor (Experimental)](/plugins/createSessionStoragePersistor)
 
 ## Installation
 

package.json

@@ -52,6 +52,7 @@
     "devtools",
     "persistQueryClient-experimental",
     "createLocalStoragePersistor-experimental",
+    "createSessionStoragePersistor-experimental",
     "broadcastQueryClient-experimental",
     "lib",
     "react",

rollup.config.js

@@ -30,6 +30,11 @@ const inputSrcs = [
     'ReactQueryCreateLocalStoragePersistorExperimental',
     'createLocalStoragePersistor-experimental',
   ],
+  [
+    'src/createSessionStoragePersistor-experimental/index.ts',
+    'ReactQueryCreateSessionStoragePersistorExperimental',
+    'createSessionStoragePersistor-experimental',
+  ],
   [
     'src/broadcastQueryClient-experimental/index.ts',
     'ReactQueryBroadcastQueryClientExperimental',

src/createSessionStoragePersistor-experimental/index.ts

@@ -0,0 +1,57 @@
+import { noop } from '../core/utils'
+import { PersistedClient, Persistor } from '../persistQueryClient-experimental'
+
+interface CreateSessionStoragePersistorOptions {
+  /** The key to use when storing the cache to sessionstorage */
+  sessionStorageKey?: string
+  /** To avoid sessionstorage spamming,
+   * pass a time in ms to throttle saving the cache to disk */
+  throttleTime?: number
+}
+
+export function createSessionStoragePersistor({
+  sessionStorageKey = `REACT_QUERY_OFFLINE_CACHE`,
+  throttleTime = 1000,
+}: CreateSessionStoragePersistorOptions = {}): Persistor {
+  if (typeof sessionStorage !== 'undefined') {
+    return {
+      persistClient: throttle(persistedClient => {
+        sessionStorage.setItem(sessionStorageKey, JSON.stringify(persistedClient))
+      }, throttleTime),
+      restoreClient: () => {
+        const cacheString = sessionStorage.getItem(sessionStorageKey)
+
+        if (!cacheString) {
+          return
+        }
+
+        return JSON.parse(cacheString) as PersistedClient
+      },
+      removeClient: () => {
+        sessionStorage.removeItem(sessionStorageKey)
+      },
+    }
+  }
+
+  return {
+    persistClient: noop,
+    restoreClient: noop,
+    removeClient: noop,
+  }
+}
+
+function throttle<TArgs extends any[]>(
+  func: (...args: TArgs) => any,
+  wait = 100
+) {
+  let timer: number | null = null
+
+  return function (...args: TArgs) {
+    if (timer === null) {
+      timer = setTimeout(() => {
+        func(...args)
+        timer = null
+      }, wait)
+    }
+  }
+}

tsconfig.types.json

@@ -15,6 +15,7 @@
     "./src/devtools/index.ts",
     "./src/persistQueryClient-experimental/index.ts",
     "./src/createLocalStoragePersistor-experimental/index.ts",
+    "./src/createSessionStoragePersistor-experimental/index.ts",
     "./src/broadcastQueryClient-experimental/index.ts"
   ],
   "exclude": ["./src/**/*"]