src/client/main.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { Provider, useStore } from "jotai/react";
import { useHydrateAtoms } from "jotai/react/utils";
import { queryClientAtom } from "jotai-tanstack-query";
import { type ReactNode, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import { StoreInitializer } from "./components/StoreInitializer";
import { queryClient } from "./queryClient";
import "./styles.css";

function HydrateQueryClient({ children }: { children: ReactNode }) {
	const store = useStore();
	useHydrateAtoms([[queryClientAtom, queryClient]], { store });
	return <>{children}</>;
}

const rootElement = document.getElementById("root");
if (!rootElement) {
	throw new Error("Root element not found");
}

createRoot(rootElement).render(
	<StrictMode>
		<Provider>
			<HydrateQueryClient>
				<StoreInitializer>
					<App />
				</StoreInitializer>
			</HydrateQueryClient>
		</Provider>
	</StrictMode>,
);