MainLayout for theme persistence

src/Root.tsx

@@ -0,0 +1,50 @@
+import { QueryClient } from '@tanstack/react-query';
+import {
+	PersistQueryClientProvider,
+	type PersistedClient,
+	type Persister,
+} from '@tanstack/react-query-persist-client';
+import { del, get, set } from 'idb-keyval';
+import React, { type ComponentType } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const container = document.getElementById('root') as HTMLElement;
+const root = createRoot(container);
+
+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;
+}
+
+function render(App: ComponentType) {
+	root.render(
+		<PersistQueryClientProvider
+			client={queryClient}
+			persistOptions={{ persister: createIDBPersister() }}
+		>
+			<React.StrictMode>
+				<App />
+			</React.StrictMode>
+		</PersistQueryClientProvider>,
+	);
+}
+
+export default render;