@tanstack/query-sync-storage-persister 4.0.0

package/build/umd/index.development.js

@@ -0,0 +1,98 @@
+/**
+ * query-sync-storage-persister
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.QuerySyncStoragePersister = {}));
+})(this, (function (exports) { 'use strict';
+
+  function createSyncStoragePersister({
+    storage,
+    key = "REACT_QUERY_OFFLINE_CACHE",
+    throttleTime = 1000,
+    serialize = JSON.stringify,
+    deserialize = JSON.parse,
+    retry
+  }) {
+    if (typeof storage !== 'undefined') {
+      const trySave = persistedClient => {
+        try {
+          storage.setItem(key, serialize(persistedClient));
+        } catch (error) {
+          return error;
+        }
+      };
+
+      return {
+        persistClient: throttle(persistedClient => {
+          let client = persistedClient;
+          let error = trySave(client);
+          let errorCount = 0;
+
+          while (error && client) {
+            errorCount++;
+            client = retry == null ? void 0 : retry({
+              persistedClient: client,
+              error,
+              errorCount
+            });
+
+            if (client) {
+              error = trySave(client);
+            }
+          }
+        }, throttleTime),
+        restoreClient: () => {
+          const cacheString = storage.getItem(key);
+
+          if (!cacheString) {
+            return;
+          }
+
+          return deserialize(cacheString);
+        },
+        removeClient: () => {
+          storage.removeItem(key);
+        }
+      };
+    }
+
+    return {
+      persistClient: noop,
+      restoreClient: () => undefined,
+      removeClient: noop
+    };
+  }
+
+  function throttle(func, wait = 100) {
+    let timer = null;
+    let params;
+    return function (...args) {
+      params = args;
+
+      if (timer === null) {
+        timer = setTimeout(() => {
+          func(...params);
+          timer = null;
+        }, wait);
+      }
+    };
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  function noop() {}
+
+  exports.createSyncStoragePersister = createSyncStoragePersister;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.development.js.map

package/build/umd/index.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.development.js","sources":["../../src/index.ts"],"sourcesContent":["import {\n  PersistedClient,\n  Persister,\n  PersistRetryer,\n} from '@tanstack/react-query-persist-client'\n\ninterface Storage {\n  getItem: (key: string) => string | null\n  setItem: (key: string, value: string) => void\n  removeItem: (key: string) => void\n}\n\ninterface CreateSyncStoragePersisterOptions {\n  /** The storage client used for setting and retrieving items from cache.\n   * For SSR pass in `undefined`.\n   */\n  storage: Storage | undefined\n  /** The key to use when storing the cache */\n  key?: string\n  /** To avoid spamming,\n   * pass a time in ms to throttle saving the cache to disk */\n  throttleTime?: number\n  /**\n   * How to serialize the data to storage.\n   * @default `JSON.stringify`\n   */\n  serialize?: (client: PersistedClient) => string\n  /**\n   * How to deserialize the data from storage.\n   * @default `JSON.parse`\n   */\n  deserialize?: (cachedString: string) => PersistedClient\n\n  retry?: PersistRetryer\n}\n\nexport function createSyncStoragePersister({\n  storage,\n  key = `REACT_QUERY_OFFLINE_CACHE`,\n  throttleTime = 1000,\n  serialize = JSON.stringify,\n  deserialize = JSON.parse,\n  retry,\n}: CreateSyncStoragePersisterOptions): Persister {\n  if (typeof storage !== 'undefined') {\n    const trySave = (persistedClient: PersistedClient): Error | undefined => {\n      try {\n        storage.setItem(key, serialize(persistedClient))\n      } catch (error) {\n        return error as Error\n      }\n    }\n    return {\n      persistClient: throttle((persistedClient) => {\n        let client: PersistedClient | undefined = persistedClient\n        let error = trySave(client)\n        let errorCount = 0\n        while (error && client) {\n          errorCount++\n          client = retry?.({\n            persistedClient: client,\n            error,\n            errorCount,\n          })\n\n          if (client) {\n            error = trySave(client)\n          }\n        }\n      }, throttleTime),\n      restoreClient: () => {\n        const cacheString = storage.getItem(key)\n\n        if (!cacheString) {\n          return\n        }\n\n        return deserialize(cacheString) as PersistedClient\n      },\n      removeClient: () => {\n        storage.removeItem(key)\n      },\n    }\n  }\n\n  return {\n    persistClient: noop,\n    restoreClient: () => undefined,\n    removeClient: noop,\n  }\n}\n\nfunction throttle<TArgs extends any[]>(\n  func: (...args: TArgs) => any,\n  wait = 100,\n) {\n  let timer: ReturnType<typeof setTimeout> | null = null\n  let params: TArgs\n  return function (...args: TArgs) {\n    params = args\n    if (timer === null) {\n      timer = setTimeout(() => {\n        func(...params)\n        timer = null\n      }, wait)\n    }\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nfunction noop() {}\n"],"names":["createSyncStoragePersister","storage","key","throttleTime","serialize","JSON","stringify","deserialize","parse","retry","trySave","persistedClient","setItem","error","persistClient","throttle","client","errorCount","restoreClient","cacheString","getItem","removeClient","removeItem","noop","undefined","func","wait","timer","params","args","setTimeout"],"mappings":";;;;;;;;;;;;;;;;EAoCO,SAASA,0BAAT,CAAoC;IACzCC,OADyC;EAEzCC,EAAAA,GAAG,GAFsC,2BAAA;EAGzCC,EAAAA,YAAY,GAAG,IAH0B;IAIzCC,SAAS,GAAGC,IAAI,CAACC,SAJwB;IAKzCC,WAAW,GAAGF,IAAI,CAACG,KALsB;EAMzCC,EAAAA,KAAAA;EANyC,CAApC,EAO0C;EAC/C,EAAA,IAAI,OAAOR,OAAP,KAAmB,WAAvB,EAAoC;MAClC,MAAMS,OAAO,GAAIC,eAAD,IAAyD;QACvE,IAAI;UACFV,OAAO,CAACW,OAAR,CAAgBV,GAAhB,EAAqBE,SAAS,CAACO,eAAD,CAA9B,CAAA,CAAA;SADF,CAEE,OAAOE,KAAP,EAAc;EACd,QAAA,OAAOA,KAAP,CAAA;EACD,OAAA;OALH,CAAA;;MAOA,OAAO;EACLC,MAAAA,aAAa,EAAEC,QAAQ,CAAEJ,eAAD,IAAqB;UAC3C,IAAIK,MAAmC,GAAGL,eAA1C,CAAA;EACA,QAAA,IAAIE,KAAK,GAAGH,OAAO,CAACM,MAAD,CAAnB,CAAA;UACA,IAAIC,UAAU,GAAG,CAAjB,CAAA;;UACA,OAAOJ,KAAK,IAAIG,MAAhB,EAAwB;YACtBC,UAAU,EAAA,CAAA;EACVD,UAAAA,MAAM,GAAGP,KAAH,IAAGA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,KAAK,CAAG;EACfE,YAAAA,eAAe,EAAEK,MADF;cAEfH,KAFe;EAGfI,YAAAA,UAAAA;EAHe,WAAH,CAAd,CAAA;;EAMA,UAAA,IAAID,MAAJ,EAAY;EACVH,YAAAA,KAAK,GAAGH,OAAO,CAACM,MAAD,CAAf,CAAA;EACD,WAAA;EACF,SAAA;SAfoB,EAgBpBb,YAhBoB,CADlB;EAkBLe,MAAAA,aAAa,EAAE,MAAM;EACnB,QAAA,MAAMC,WAAW,GAAGlB,OAAO,CAACmB,OAAR,CAAgBlB,GAAhB,CAApB,CAAA;;UAEA,IAAI,CAACiB,WAAL,EAAkB;EAChB,UAAA,OAAA;EACD,SAAA;;UAED,OAAOZ,WAAW,CAACY,WAAD,CAAlB,CAAA;SAzBG;EA2BLE,MAAAA,YAAY,EAAE,MAAM;UAClBpB,OAAO,CAACqB,UAAR,CAAmBpB,GAAnB,CAAA,CAAA;EACD,OAAA;OA7BH,CAAA;EA+BD,GAAA;;IAED,OAAO;EACLY,IAAAA,aAAa,EAAES,IADV;MAELL,aAAa,EAAE,MAAMM,SAFhB;EAGLH,IAAAA,YAAY,EAAEE,IAAAA;KAHhB,CAAA;EAKD,CAAA;;EAED,SAASR,QAAT,CACEU,IADF,EAEEC,IAAI,GAAG,GAFT,EAGE;IACA,IAAIC,KAA2C,GAAG,IAAlD,CAAA;EACA,EAAA,IAAIC,MAAJ,CAAA;IACA,OAAO,UAAU,GAAGC,IAAb,EAA0B;EAC/BD,IAAAA,MAAM,GAAGC,IAAT,CAAA;;MACA,IAAIF,KAAK,KAAK,IAAd,EAAoB;QAClBA,KAAK,GAAGG,UAAU,CAAC,MAAM;UACvBL,IAAI,CAAC,GAAGG,MAAJ,CAAJ,CAAA;EACAD,QAAAA,KAAK,GAAG,IAAR,CAAA;SAFgB,EAGfD,IAHe,CAAlB,CAAA;EAID,KAAA;KAPH,CAAA;EASD;;;EAGD,SAASH,IAAT,GAAgB;;;;;;;;;;"}

package/build/umd/index.production.js

@@ -0,0 +1,12 @@
+/**
+ * query-sync-storage-persister
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).QuerySyncStoragePersister={})}(this,(function(e){"use strict";function t(e,t=100){let r,n=null;return function(...i){r=i,null===n&&(n=setTimeout((()=>{e(...r),n=null}),t))}}function r(){}e.createSyncStoragePersister=function({storage:e,key:n="REACT_QUERY_OFFLINE_CACHE",throttleTime:i=1e3,serialize:o=JSON.stringify,deserialize:s=JSON.parse,retry:l}){if(void 0!==e){const r=t=>{try{e.setItem(n,o(t))}catch(e){return e}};return{persistClient:t((e=>{let t=e,n=r(t),i=0;for(;n&&t;)i++,t=null==l?void 0:l({persistedClient:t,error:n,errorCount:i}),t&&(n=r(t))}),i),restoreClient:()=>{const t=e.getItem(n);if(t)return s(t)},removeClient:()=>{e.removeItem(n)}}}return{persistClient:r,restoreClient:()=>{},removeClient:r}},Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=index.production.js.map

package/build/umd/index.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.production.js","sources":["../../src/index.ts"],"sourcesContent":["import {\n  PersistedClient,\n  Persister,\n  PersistRetryer,\n} from '@tanstack/react-query-persist-client'\n\ninterface Storage {\n  getItem: (key: string) => string | null\n  setItem: (key: string, value: string) => void\n  removeItem: (key: string) => void\n}\n\ninterface CreateSyncStoragePersisterOptions {\n  /** The storage client used for setting and retrieving items from cache.\n   * For SSR pass in `undefined`.\n   */\n  storage: Storage | undefined\n  /** The key to use when storing the cache */\n  key?: string\n  /** To avoid spamming,\n   * pass a time in ms to throttle saving the cache to disk */\n  throttleTime?: number\n  /**\n   * How to serialize the data to storage.\n   * @default `JSON.stringify`\n   */\n  serialize?: (client: PersistedClient) => string\n  /**\n   * How to deserialize the data from storage.\n   * @default `JSON.parse`\n   */\n  deserialize?: (cachedString: string) => PersistedClient\n\n  retry?: PersistRetryer\n}\n\nexport function createSyncStoragePersister({\n  storage,\n  key = `REACT_QUERY_OFFLINE_CACHE`,\n  throttleTime = 1000,\n  serialize = JSON.stringify,\n  deserialize = JSON.parse,\n  retry,\n}: CreateSyncStoragePersisterOptions): Persister {\n  if (typeof storage !== 'undefined') {\n    const trySave = (persistedClient: PersistedClient): Error | undefined => {\n      try {\n        storage.setItem(key, serialize(persistedClient))\n      } catch (error) {\n        return error as Error\n      }\n    }\n    return {\n      persistClient: throttle((persistedClient) => {\n        let client: PersistedClient | undefined = persistedClient\n        let error = trySave(client)\n        let errorCount = 0\n        while (error && client) {\n          errorCount++\n          client = retry?.({\n            persistedClient: client,\n            error,\n            errorCount,\n          })\n\n          if (client) {\n            error = trySave(client)\n          }\n        }\n      }, throttleTime),\n      restoreClient: () => {\n        const cacheString = storage.getItem(key)\n\n        if (!cacheString) {\n          return\n        }\n\n        return deserialize(cacheString) as PersistedClient\n      },\n      removeClient: () => {\n        storage.removeItem(key)\n      },\n    }\n  }\n\n  return {\n    persistClient: noop,\n    restoreClient: () => undefined,\n    removeClient: noop,\n  }\n}\n\nfunction throttle<TArgs extends any[]>(\n  func: (...args: TArgs) => any,\n  wait = 100,\n) {\n  let timer: ReturnType<typeof setTimeout> | null = null\n  let params: TArgs\n  return function (...args: TArgs) {\n    params = args\n    if (timer === null) {\n      timer = setTimeout(() => {\n        func(...params)\n        timer = null\n      }, wait)\n    }\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nfunction noop() {}\n"],"names":["throttle","func","wait","params","timer","args","setTimeout","noop","storage","key","throttleTime","serialize","JSON","stringify","deserialize","parse","retry","trySave","persistedClient","setItem","error","persistClient","client","errorCount","restoreClient","cacheString","getItem","removeClient","removeItem"],"mappings":";;;;;;;;;;iQA4FA,SAASA,EACPC,EACAC,EAAO,KAEP,IACIC,EADAC,EAA8C,KAElD,OAAO,YAAaC,GAClBF,EAASE,EACK,OAAVD,IACFA,EAAQE,YAAW,KACjBL,KAAQE,GACRC,EAAQ,OACPF,KAMT,SAASK,kCA1EF,UAAoCC,QACzCA,EADyCC,IAEzCA,EAFyC,4BAAAC,aAGzCA,EAAe,IAH0BC,UAIzCA,EAAYC,KAAKC,UAJwBC,YAKzCA,EAAcF,KAAKG,MALsBC,MAMzCA,IAEA,QAAuB,IAAZR,EAAyB,CAClC,MAAMS,EAAWC,IACf,IACEV,EAAQW,QAAQV,EAAKE,EAAUO,IAC/B,MAAOE,GACP,OAAOA,IAGX,MAAO,CACLC,cAAerB,GAAUkB,IACvB,IAAII,EAAsCJ,EACtCE,EAAQH,EAAQK,GAChBC,EAAa,EACjB,KAAOH,GAASE,GACdC,IACAD,EAASN,MAAAA,OAAAA,EAAAA,EAAQ,CACfE,gBAAiBI,EACjBF,QACAG,eAGED,IACFF,EAAQH,EAAQK,MAGnBZ,GACHc,cAAe,KACb,MAAMC,EAAcjB,EAAQkB,QAAQjB,GAEpC,GAAKgB,EAIL,OAAOX,EAAYW,IAErBE,aAAc,KACZnB,EAAQoB,WAAWnB,KAKzB,MAAO,CACLY,cAAed,EACfiB,cAAe,OACfG,aAAcpB"}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@tanstack/query-sync-storage-persister",
+  "version": "4.0.0",
+  "description": "TODO",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/query",
+  "homepage": "https://tanstack.com/query",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "module": "build/esm/index.js",
+  "main": "build/cjs/index.js",
+  "browser": "build/umd/index.production.js",
+  "types": "build/types/packages/query-sync-storage-persister/src/index.d.ts",
+  "files": [
+    "build",
+    "src"
+  ],
+  "scripts": {
+    "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
+    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false"
+  }
+}

package/src/__tests__/storageIsFull.test.ts

@@ -0,0 +1,157 @@
+import {
+  dehydrate,
+  MutationCache,
+  QueryCache,
+  QueryClient,
+} from '@tanstack/query-core'
+import { removeOldestQuery } from '@tanstack/react-query-persist-client'
+import { createSyncStoragePersister } from '../index'
+import { sleep } from '../../../../tests/utils'
+
+function getMockStorage(limitSize?: number) {
+  const dataSet = new Map<string, string>()
+  return {
+    getItem(key: string): string | null {
+      const value = dataSet.get(key)
+      return value === undefined ? null : value
+    },
+
+    setItem(key: string, value: string) {
+      if (typeof limitSize !== 'undefined') {
+        const currentSize = Array.from(dataSet.entries()).reduce(
+          (n, d) => d[0].length + d[1].length + n,
+          0,
+        )
+        if (
+          currentSize - (dataSet.get(key)?.length || 0) + value.length >
+          limitSize
+        ) {
+          throw Error(
+            `Failed to execute 'setItem' on 'Storage': Setting the value of '${key}' exceeded the quota.`,
+          )
+        }
+      }
+      return dataSet.set(key, value)
+    },
+    removeItem(key: string) {
+      return dataSet.delete(key)
+    },
+  } as any as Storage
+}
+
+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 persister = createSyncStoragePersister({
+      throttleTime: 0,
+      storage,
+    })
+
+    await queryClient.prefetchQuery(['string'], () => Promise.resolve('string'))
+    await queryClient.prefetchQuery(['number'], () => Promise.resolve(1))
+    await queryClient.prefetchQuery(['boolean'], () => Promise.resolve(true))
+    await queryClient.prefetchQuery(['null'], () => Promise.resolve(null))
+    await queryClient.prefetchQuery(['array'], () =>
+      Promise.resolve(['string', 0]),
+    )
+
+    const persistClient = {
+      buster: 'test-buster',
+      timestamp: Date.now(),
+      clientState: dehydrate(queryClient),
+    }
+    persister.persistClient(persistClient)
+    await sleep(1)
+    const restoredClient = await persister.restoreClient()
+    expect(restoredClient).toEqual(persistClient)
+  })
+
+  test('should clean the old queries when storage full', async () => {
+    const queryCache = new QueryCache()
+    const mutationCache = new MutationCache()
+    const queryClient = new QueryClient({ queryCache, mutationCache })
+
+    const N = 2000
+    const storage = getMockStorage(N * 5) // can save 4 items;
+    const persister = createSyncStoragePersister({
+      throttleTime: 0,
+      storage,
+      retry: removeOldestQuery,
+    })
+
+    await queryClient.prefetchQuery(['A'], () => Promise.resolve('A'.repeat(N)))
+    await sleep(1)
+    await queryClient.prefetchQuery(['B'], () => Promise.resolve('B'.repeat(N)))
+    await sleep(1)
+    await queryClient.prefetchQuery(['C'], () => Promise.resolve('C'.repeat(N)))
+    await sleep(1)
+    await queryClient.prefetchQuery(['D'], () => Promise.resolve('D'.repeat(N)))
+
+    await sleep(1)
+    await queryClient.prefetchQuery(['E'], () => Promise.resolve('E'.repeat(N)))
+
+    const persistClient = {
+      buster: 'test-limit',
+      timestamp: Date.now(),
+      clientState: dehydrate(queryClient),
+    }
+    persister.persistClient(persistClient)
+    await sleep(10)
+    const restoredClient = await persister.restoreClient()
+    expect(restoredClient?.clientState.queries.length).toEqual(4)
+    expect(
+      restoredClient?.clientState.queries.find((q) => q.queryKey[0] === 'A'),
+    ).toBeUndefined()
+    expect(
+      restoredClient?.clientState.queries.find((q) => q.queryKey[0] === 'B'),
+    ).not.toBeUndefined()
+
+    // update query Data
+    await queryClient.prefetchQuery(['A'], () => Promise.resolve('a'.repeat(N)))
+    const updatedPersistClient = {
+      buster: 'test-limit',
+      timestamp: Date.now(),
+      clientState: dehydrate(queryClient),
+    }
+    persister.persistClient(updatedPersistClient)
+    await sleep(10)
+    const restoredClient2 = await persister.restoreClient()
+    expect(restoredClient2?.clientState.queries.length).toEqual(4)
+    expect(
+      restoredClient2?.clientState.queries.find((q) => q.queryKey[0] === 'A'),
+    ).toHaveProperty('state.data', 'a'.repeat(N))
+    expect(
+      restoredClient2?.clientState.queries.find((q) => q.queryKey[0] === 'B'),
+    ).toBeUndefined()
+  })
+  test('should clear storage as default error handling', async () => {
+    const queryCache = new QueryCache()
+    const mutationCache = new MutationCache()
+    const queryClient = new QueryClient({ queryCache, mutationCache })
+
+    const N = 2000
+    const storage = getMockStorage(0)
+    const persister = createSyncStoragePersister({
+      throttleTime: 0,
+      storage,
+      retry: removeOldestQuery,
+    })
+
+    await queryClient.prefetchQuery(['A'], () => Promise.resolve('A'.repeat(N)))
+    await sleep(1)
+
+    const persistClient = {
+      buster: 'test-limit',
+      timestamp: Date.now(),
+      clientState: dehydrate(queryClient),
+    }
+    persister.persistClient(persistClient)
+    await sleep(10)
+    const restoredClient = await persister.restoreClient()
+    expect(restoredClient).toEqual(undefined)
+  })
+})

package/src/index.ts

@@ -0,0 +1,111 @@
+import {
+  PersistedClient,
+  Persister,
+  PersistRetryer,
+} from '@tanstack/react-query-persist-client'
+
+interface Storage {
+  getItem: (key: string) => string | null
+  setItem: (key: string, value: string) => void
+  removeItem: (key: string) => void
+}
+
+interface CreateSyncStoragePersisterOptions {
+  /** The storage client used for setting and retrieving items from cache.
+   * For SSR pass in `undefined`.
+   */
+  storage: Storage | undefined
+  /** 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
+  /**
+   * How to serialize the data to storage.
+   * @default `JSON.stringify`
+   */
+  serialize?: (client: PersistedClient) => string
+  /**
+   * How to deserialize the data from storage.
+   * @default `JSON.parse`
+   */
+  deserialize?: (cachedString: string) => PersistedClient
+
+  retry?: PersistRetryer
+}
+
+export function createSyncStoragePersister({
+  storage,
+  key = `REACT_QUERY_OFFLINE_CACHE`,
+  throttleTime = 1000,
+  serialize = JSON.stringify,
+  deserialize = JSON.parse,
+  retry,
+}: CreateSyncStoragePersisterOptions): Persister {
+  if (typeof storage !== 'undefined') {
+    const trySave = (persistedClient: PersistedClient): Error | undefined => {
+      try {
+        storage.setItem(key, serialize(persistedClient))
+      } catch (error) {
+        return error as Error
+      }
+    }
+    return {
+      persistClient: throttle((persistedClient) => {
+        let client: PersistedClient | undefined = persistedClient
+        let error = trySave(client)
+        let errorCount = 0
+        while (error && client) {
+          errorCount++
+          client = retry?.({
+            persistedClient: client,
+            error,
+            errorCount,
+          })
+
+          if (client) {
+            error = trySave(client)
+          }
+        }
+      }, throttleTime),
+      restoreClient: () => {
+        const cacheString = storage.getItem(key)
+
+        if (!cacheString) {
+          return
+        }
+
+        return deserialize(cacheString) as PersistedClient
+      },
+      removeClient: () => {
+        storage.removeItem(key)
+      },
+    }
+  }
+
+  return {
+    persistClient: noop,
+    restoreClient: () => undefined,
+    removeClient: noop,
+  }
+}
+
+function throttle<TArgs extends any[]>(
+  func: (...args: TArgs) => any,
+  wait = 100,
+) {
+  let timer: ReturnType<typeof setTimeout> | null = null
+  let params: TArgs
+  return function (...args: TArgs) {
+    params = args
+    if (timer === null) {
+      timer = setTimeout(() => {
+        func(...params)
+        timer = null
+      }, wait)
+    }
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}