aljaz/rabbit
1
0
Fork 0
mirror of https://github.com/aljazceru/rabbit.git synced 2025-12-19 15:04:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: use IndexedDB for TanStack Query cache

Browse Source
This commit is contained in:
Shusui MOYATANI
2023-07-07 01:09:45 +09:00
parent 0cc30b5489
commit c049fdd3a6
3 changed files with 55 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
package-lock.json generated
View File

@@ -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",

3
package.json
View File

@@ -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",

25
src/App.tsx
View File

@@ -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({
storage: window.localStorage,
const indexedDBPersister = createAsyncStoragePersister({
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());
});