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/atoms/cards.ts | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'src/client/atoms/cards.ts') diff --git a/src/client/atoms/cards.ts b/src/client/atoms/cards.ts index f053ab9..c0275b0 100644 --- a/src/client/atoms/cards.ts +++ b/src/client/atoms/cards.ts @@ -1,5 +1,6 @@ +import { atomFamily } from "jotai/utils"; +import { atomWithSuspenseQuery } from "jotai-tanstack-query"; import { apiClient } from "../api/client"; -import { createReloadableAtomFamily } from "./utils"; export interface Card { id: string; @@ -20,12 +21,15 @@ export interface Card { // Cards by Deck - Suspense-compatible // ===================== -export const cardsByDeckAtomFamily = createReloadableAtomFamily( - async (deckId: string) => { - const res = await apiClient.rpc.api.decks[":deckId"].cards.$get({ - param: { deckId }, - }); - const data = await apiClient.handleResponse<{ cards: Card[] }>(res); - return data.cards; - }, +export const cardsByDeckAtomFamily = atomFamily((deckId: string) => + atomWithSuspenseQuery(() => ({ + queryKey: ["decks", deckId, "cards"], + queryFn: async () => { + const res = await apiClient.rpc.api.decks[":deckId"].cards.$get({ + param: { deckId }, + }); + const data = await apiClient.handleResponse<{ cards: Card[] }>(res); + return data.cards; + }, + })), ); -- cgit v1.3-1-g0d28