From fffd36268a216044523c3f5227c3d375608c36dc Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sat, 14 Feb 2026 12:17:23 +0900 Subject: refactor(frontend): migrate state management to jotai and jotai-tanstack-query Replace React Context + manual useEffect data fetching with jotai atoms for state management and jotai-tanstack-query for server state caching. - Add jotai, jotai-tanstack-query, @tanstack/query-core dependencies - Create atoms for auth (primitive + action), feeds (suspense query), and articles (infinite query with cursor-based pagination) - Wire up Provider, HydrateQueryClient, and StoreInitializer in main.tsx - Migrate all components from useAuth() context to jotai atoms - Replace manual fetch logic in FeedSidebar/FeedList with feedsAtom - Replace usePaginatedArticles hook with articlesInfiniteAtom - Add queryClient.invalidateQueries() after mutations for automatic cache refresh - Add ErrorBoundary and LoadingSpinner components for Suspense support - Remove callback prop chains (onFeedAdded, onFeedChanged, etc.) in favor of query invalidation Co-Authored-By: Claude Opus 4.6 --- frontend/src/main.tsx | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) (limited to 'frontend/src/main.tsx') diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index d1dd4d5..5333b77 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,14 +1,28 @@ -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 "./index.css"; import App from "./App.tsx"; -import { AuthProvider } from "./contexts/AuthContext"; +import { StoreInitializer } from "./components/StoreInitializer"; +import "./index.css"; +import { queryClient } from "./queryClient"; + +function HydrateQueryClient({ children }: { children: ReactNode }) { + const store = useStore(); + useHydrateAtoms([[queryClientAtom, queryClient]], { store }); + return <>{children}; +} // biome-ignore lint/style/noNonNullAssertion: root element is guaranteed to exist createRoot(document.getElementById("root")!).render( - - - + + + + + + + , ); -- cgit v1.3-1-g0d28