Persist lyrics queries in indexeddb

src/renderer/index.tsx

@@ -1,19 +1,68 @@
 import { Notifications } from '@mantine/notifications';
-import { QueryClientProvider } from '@tanstack/react-query';
+import {
+    PersistedClient,
+    Persister,
+    PersistQueryClientProvider,
+} from '@tanstack/react-query-persist-client';
+import { get, set, del } from 'idb-keyval';
 import { createRoot } from 'react-dom/client';
 import { App } from './app';
 import { queryClient } from './lib/react-query';
+
 import 'overlayscrollbars/overlayscrollbars.css';
 
+export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
+    return {
+        persistClient: async (client: PersistedClient) => {
+            set(idbValidKey, client);
+        },
+        removeClient: async () => {
+            await del(idbValidKey);
+        },
+        restoreClient: async () => {
+            // eslint-disable-next-line no-return-await
+            return await get<PersistedClient>(idbValidKey);
+        },
+    } as Persister;
+}
+
+const indexedDbPersister = createIDBPersister('feishin');
+
 const container = document.getElementById('root')! as HTMLElement;
 const root = createRoot(container);
 
 root.render(
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{
+            buster: 'feishin',
+            dehydrateOptions: {
+                dehydrateQueries: true,
+                shouldDehydrateQuery: (query) => {
+                    const isSuccess = query.state.status === 'success';
+                    const isLyricsQueryKey =
+                        query.queryKey.includes('song') &&
+                        query.queryKey.includes('lyrics') &&
+                        query.queryKey.includes('select');
+
+                    return isSuccess && isLyricsQueryKey;
+                },
+            },
+            hydrateOptions: {
+                defaultOptions: {
+                    queries: {
+                        cacheTime: Infinity,
+                    },
+                },
+            },
+            maxAge: Infinity,
+            persister: indexedDbPersister,
+        }}
+    >
         <Notifications
             containerWidth="300px"
             position="bottom-center"
         />
         <App />
-    </QueryClientProvider>,
+    </PersistQueryClientProvider>,
 );