feat: add idb persister to cache requests for 24 hours

src/app.tsx

@@ -1,5 +1,7 @@
 import { Router } from "./router";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
+import { createIDBPersister } from "./services/infrastructure/persisters/create-idb-persister";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -7,14 +9,19 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       retry: false,
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
     },
   },
 });
+const persister = createIDBPersister();
 
 export function App() {
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister }}
+    >
       <Router />
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   );
 }

src/services/infrastructure/persisters/create-idb-persister.ts

@@ -0,0 +1,22 @@
+import { get, set, del } from "idb-keyval";
+import {
+  PersistedClient,
+  Persister,
+} from "@tanstack/react-query-persist-client";
+/**
+ * Creates an Indexed DB persister
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
+ */
+export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
+  return {
+    persistClient: async (client: PersistedClient) => {
+      await set(idbValidKey, client);
+    },
+    restoreClient: async () => {
+      return await get<PersistedClient>(idbValidKey);
+    },
+    removeClient: async () => {
+      await del(idbValidKey);
+    },
+  } as Persister;
+}