feat: use IndexedDB for TanStack Query cache

package-lock.json

@@ -12,8 +12,8 @@
         "@solidjs/meta": "^0.28.5",
         "@solidjs/router": "^0.8.2",
         "@tailwindcss/forms": "^0.5.3",
+        "@tanstack/query-async-storage-persister": "^4.29.19",
         "@tanstack/query-persist-client-core": "^4.29.19",
-        "@tanstack/query-sync-storage-persister": "^4.29.19",
         "@tanstack/solid-query": "^4.29.19",
         "@tanstack/solid-virtual": "^3.0.0-beta.6",
         "@textcomplete/core": "^0.1.12",
@@ -24,6 +24,7 @@
         "heroicons": "^2.0.18",
         "i18next": "^23.2.6",
         "i18next-browser-languagedetector": "^7.1.0",
+        "idb-keyval": "^6.2.1",
         "lodash": "^4.17.21",
         "nostr-tools": "^1.12.1",
         "solid-js": "^1.7.7",
@@ -1247,6 +1248,18 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
       }
     },
+    "node_modules/@tanstack/query-async-storage-persister": {
+      "version": "4.29.19",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-async-storage-persister/-/query-async-storage-persister-4.29.19.tgz",
+      "integrity": "sha512-9Kv0+gQoZp8wLf0uA+edhUZQb7ahd6lLmwRQwbca1uYVYmhVlu1IPdkhWlaIy6aGep8ogiApf3N2baOxYVwIJQ==",
+      "dependencies": {
+        "@tanstack/query-persist-client-core": "4.29.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "4.29.19",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.19.tgz",
@@ -1268,18 +1281,6 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
-    "node_modules/@tanstack/query-sync-storage-persister": {
-      "version": "4.29.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.29.19.tgz",
-      "integrity": "sha512-B3wDl3D3YBFTlY2yeXecEh4NEG/8Hr8pqsxnWJijRwBqvOKlqD4bUgk5kl5nbn1mShD2vnQ+yvH900/11X29Zw==",
-      "dependencies": {
-        "@tanstack/query-persist-client-core": "4.29.19"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@tanstack/solid-query": {
       "version": "4.29.19",
       "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-4.29.19.tgz",
@@ -4081,6 +4082,11 @@
         "@babel/runtime": "^7.19.4"
       }
     },
+    "node_modules/idb-keyval": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
+      "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+    },
     "node_modules/ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -8234,6 +8240,14 @@
         "mini-svg-data-uri": "^1.2.3"
       }
     },
+    "@tanstack/query-async-storage-persister": {
+      "version": "4.29.19",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-async-storage-persister/-/query-async-storage-persister-4.29.19.tgz",
+      "integrity": "sha512-9Kv0+gQoZp8wLf0uA+edhUZQb7ahd6lLmwRQwbca1uYVYmhVlu1IPdkhWlaIy6aGep8ogiApf3N2baOxYVwIJQ==",
+      "requires": {
+        "@tanstack/query-persist-client-core": "4.29.19"
+      }
+    },
     "@tanstack/query-core": {
       "version": "4.29.19",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.19.tgz",
@@ -8247,14 +8261,6 @@
         "@tanstack/query-core": "4.29.19"
       }
     },
-    "@tanstack/query-sync-storage-persister": {
-      "version": "4.29.19",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.29.19.tgz",
-      "integrity": "sha512-B3wDl3D3YBFTlY2yeXecEh4NEG/8Hr8pqsxnWJijRwBqvOKlqD4bUgk5kl5nbn1mShD2vnQ+yvH900/11X29Zw==",
-      "requires": {
-        "@tanstack/query-persist-client-core": "4.29.19"
-      }
-    },
     "@tanstack/solid-query": {
       "version": "4.29.19",
       "resolved": "https://registry.npmjs.org/@tanstack/solid-query/-/solid-query-4.29.19.tgz",
@@ -10277,6 +10283,11 @@
         "@babel/runtime": "^7.19.4"
       }
     },
+    "idb-keyval": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
+      "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
+    },
     "ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",

package.json

@@ -49,8 +49,8 @@
     "@solidjs/meta": "^0.28.5",
     "@solidjs/router": "^0.8.2",
     "@tailwindcss/forms": "^0.5.3",
+    "@tanstack/query-async-storage-persister": "^4.29.19",
     "@tanstack/query-persist-client-core": "^4.29.19",
-    "@tanstack/query-sync-storage-persister": "^4.29.19",
     "@tanstack/solid-query": "^4.29.19",
     "@tanstack/solid-virtual": "^3.0.0-beta.6",
     "@textcomplete/core": "^0.1.12",
@@ -61,6 +61,7 @@
     "heroicons": "^2.0.18",
     "i18next": "^23.2.6",
     "i18next-browser-languagedetector": "^7.1.0",
+    "idb-keyval": "^6.2.1",
     "lodash": "^4.17.21",
     "nostr-tools": "^1.12.1",
     "solid-js": "^1.7.7",

src/App.tsx

@@ -1,9 +1,10 @@
 import { createEffect, onCleanup, lazy, type Component } from 'solid-js';
 
 import { Routes, Route } from '@solidjs/router';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { persistQueryClient } from '@tanstack/query-persist-client-core';
-import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
 import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
+import { get as getItem, set as setItem, del as removeItem } from 'idb-keyval';
 
 import i18nextInstance from '@/i18n/i18n';
 import { I18NextProvider } from '@/i18n/useTranslation';
@@ -16,16 +17,32 @@ const queryClient = new QueryClient({});
 
 const i18next = i18nextInstance();
 
-const localStoragePersister = createSyncStoragePersister({
+const indexedDBPersister = createAsyncStoragePersister({
-  storage: window.localStorage,
+  storage: {
+    getItem(key: string) {
+      return getItem<string>(key).then((e) => e ?? null);
+    },
+    setItem(key: string, value: string) {
+      return setItem(key, value);
+    },
+    removeItem(key: string) {
+      return removeItem(key);
+    },
+  },
 });
 
 const App: Component = () => {
   createEffect(() => {
     const [unsubscribe] = persistQueryClient({
       queryClient,
-      persister: localStoragePersister,
+      persister: indexedDBPersister,
     });
+
+    // TODO remove this in the future
+    if (window.localStorage != null) {
+      window.localStorage.removeItem('REACT_QUERY_OFFLINE_CACHE');
+    }
+
     onCleanup(() => unsubscribe());
   });