From a07dada0c9ba80976692ee14e256da0a2d6b0112 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 1 Feb 2026 10:16:35 +0900 Subject: refactor(atoms): migrate to jotai-tanstack-query from custom reloadable atoms Replace custom createReloadableAtom/createReloadableAtomFamily with atomWithSuspenseQuery from jotai-tanstack-query, leveraging TanStack Query's built-in caching, invalidation, and Suspense support. - Add @tanstack/query-core and jotai-tanstack-query dependencies - Create shared QueryClient instance (src/client/queryClient.ts) - Migrate all data atoms (decks, cards, study, noteTypes) to atomWithSuspenseQuery - Update page components to use .data destructuring and queryClient.invalidateQueries() - Update all test files to use QueryClient for data hydration - Remove src/client/atoms/utils.ts (no longer needed) Co-Authored-By: Claude Opus 4.5 --- src/client/main.tsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) (limited to 'src/client/main.tsx') diff --git a/src/client/main.tsx b/src/client/main.tsx index a1d296a..b9296f4 100644 --- a/src/client/main.tsx +++ b/src/client/main.tsx @@ -1,9 +1,19 @@ -import { StrictMode } from "react"; +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"); @@ -11,8 +21,12 @@ if (!rootElement) { createRoot(rootElement).render( - - - + + + + + + + , ); -- cgit v1.3-1-g0d28