Updates to rendering

src/main.tsx

@@ -1,10 +1,44 @@
+import { QueryClient } from '@tanstack/react-query';
+import {
+	type PersistedClient,
+	type Persister,
+	PersistQueryClientProvider,
+} from '@tanstack/react-query-persist-client';
+import { del, get, set } from 'idb-keyval';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import App from './App';
-import render from './Root';
 
-Promise.all([render, App])
-	.then(([render, App]) => {
-		render(App);
-	})
-	.catch((error) => {
-		console.error('Error loading the app:', error);
-	});
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			gcTime: 1000 * 60 * 60 * 24, // 24 hours
+			staleTime: 1000 * 60 * 1, // 1 min
+		},
+	},
+});
+
+export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
+	return {
+		persistClient: async (client: PersistedClient) => {
+			set(idbValidKey, client);
+		},
+		restoreClient: async () => {
+			return await get<PersistedClient>(idbValidKey);
+		},
+		removeClient: async () => {
+			await del(idbValidKey);
+		},
+	} as Persister;
+}
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+	<StrictMode>
+		<PersistQueryClientProvider
+			client={queryClient}
+			persistOptions={{ persister: createIDBPersister() }}
+		>
+			<App />
+		</PersistQueryClientProvider>
+	</StrictMode>,
+);