feat(persist-localstorage-experimental): temporarily persist cache to disk

Author: tannerlinsley

package.json

@@ -53,6 +53,7 @@
     "es",
     "hydration",
     "devtools",
+    "persist-localstorage-experimental",
     "lib",
     "react",
     "scripts",

persist-localstorage-experimental/package.json

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

rollup.config.js

@@ -19,6 +19,11 @@ const inputSrcs = [
   ['src/core/index.ts', 'ReactQueryCore', 'react-query-core'],
   ['src/devtools/index.ts', 'ReactQueryDevtools', 'react-query-devtools'],
   ['src/hydration/index.ts', 'ReactQueryHydration', 'react-query-hydration'],
+  [
+    'src/persist-localstorage-experimental/index.ts',
+    'ReactQueryPersistLocalStorageExperimental',
+    'persist-localstorage-experimental',
+  ],
 ]
 
 const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']

src/persist-localstorage-experimental/index.ts

@@ -0,0 +1,78 @@
+import { QueryClient } from '../core'
+import { dehydrate, hydrate } from '../hydration'
+
+interface LocalStorageCache {
+  timestamp: number
+  buster: string
+  cacheState: any
+}
+
+interface Options {
+  /** The key to use when storing the cache to localstorage */
+  localStorageKey?: string
+  /** To avoid localstorage spamming,
+   * pass a time in ms to throttle saving the cache to disk */
+  throttleTime?: number
+  /** The max-allowed age of the cache.
+   * If a persisted cache is found that is older than this
+   * time, it will be discarded */
+  maxAge?: number
+  /** A unique string that can be used to forcefully
+   * invalidate existing caches if they do not share the same buster string */
+  buster?: string
+}
+
+export function persistWithLocalStorage(
+  queryClient: QueryClient,
+  {
+    localStorageKey = `REACT_QUERY_OFFLINE_CACHE`,
+    throttleTime = 1000,
+    maxAge = 1000 * 60 * 60 * 24,
+    buster = '',
+  }: Options = {}
+) {
+  const saveCache = throttle(() => {
+    const storageCache: LocalStorageCache = {
+      buster,
+      timestamp: Date.now(),
+      cacheState: dehydrate(queryClient),
+    }
+
+    localStorage.setItem(localStorageKey, JSON.stringify(storageCache))
+  }, throttleTime)
+
+  if (typeof localStorage !== 'undefined') {
+    const cacheStorage = localStorage.getItem(localStorageKey)
+
+    if (!cacheStorage) {
+      return
+    }
+
+    const cache: LocalStorageCache = JSON.parse(cacheStorage)
+
+    if (cache.timestamp) {
+      const expired = Date.now() - cache.timestamp > maxAge
+      const busted = cache.buster !== buster
+      if (expired || busted) {
+        localStorage.removeItem(localStorageKey)
+      } else {
+        hydrate(queryClient, cache.cacheState)
+      }
+    }
+
+    queryClient.getQueryCache().subscribe(saveCache)
+  }
+}
+
+function throttle(func: (...args: any[]) => any, wait = 100) {
+  let timer: number | null = null
+
+  return function (...args: any[]) {
+    if (timer === null) {
+      timer = setTimeout(() => {
+        func(...args)
+        timer = null
+      }, wait)
+    }
+  }
+}

tsconfig.types.json

@@ -9,7 +9,8 @@
   "files": [
     "./src/index.ts",
     "./src/hydration/index.ts",
-    "./src/devtools/index.ts"
+    "./src/devtools/index.ts",
+    "./src/persist-localstorage-experimental/index.ts"
   ],
   "exclude": ["./src/**/*"]
 }