32-data-fetch-patterns

Data Fetch パターン（TanStack Query + Tauri）

このルールは、SQLite/Tauri コマンド連携を TanStack Query で統一するための運用規約です。UI 層は直接 invoke を呼ばず、データ層（Query/Mutation）を経由します。

コア設計

• QueryClient は単一インスタンスを QueryClientProvider でアプリ全体に提供。
  • 実装: src/lib/data/queryClient.ts
  • 既定オプション（staleTime 等）はここで集中管理。例外のみクエリ側で上書き。
• クエリキーは安定・最小の粒度で queryKeys に集約。
  • 実装: src/lib/data/queryKeys.ts
• リソース別に Query/Mutation を src/lib/data/queries/* に定義。
  • 例: src/lib/data/queries/denyList.ts
• UI 層からはコマンドを直接呼ばず、Query/Mutation のみ使用。

ディレクトリ構成（要点）

• src/lib/data/queryClient.ts … QueryClient の生成・既定オプション
• src/lib/data/queryKeys.ts … 安定キー（例: denyList.all()、games(), game(id)）
• src/lib/data/queries/*.ts … リソース毎の useXxxQuery/useXxxMutation

Provider（アプリ組み込み）

App.svelte で QueryClientProvider をルートに設置。

<script lang="ts">
  import { QueryClientProvider } from '@tanstack/svelte-query'
  import { queryClient } from '@/lib/data/queryClient'
</script>

<QueryClientProvider client={queryClient}>
  <!-- App content -->
</QueryClientProvider>

クエリ定義（読み取り系）

• 命名は useXxxQuery。返り値は Svelte ストア（CreateQueryResult）。
• queryKey は queryKeys を使用。
• 既定オプションは queryClient に寄せ、特殊な場合のみクエリ側で指定。

// src/lib/data/queries/denyList.ts
import { createQuery } from '@tanstack/svelte-query'
import { commandDenyListAll } from '@/lib/command'
import { queryKeys } from '@/lib/data/queryKeys'

export function useDenyListQuery() {
  return createQuery({
    queryKey: queryKeys.denyList.all(),
    queryFn: () => commandDenyListAll(),
  })
}

ミューテーション定義（更新系）

• 命名は useXxxMutation。成功時に関連クエリをピンポイントで invalidate。
• 必要に応じて楽観的更新（onMutate）→ ロールバック（onError）を使用。

// src/lib/data/queries/denyList.ts
import { createMutation } from '@tanstack/svelte-query'
import { commandDenyListAdd, commandDenyListRemove } from '@/lib/command'
import { queryClient } from '@/lib/data/queryClient'
import { queryKeys } from '@/lib/data/queryKeys'

export function useAddDenyListMutation() {
  return createMutation<unknown, Error, { storeType: number, storeId: string, name: string }>({
    mutationFn: input => commandDenyListAdd(input.storeType, input.storeId, input.name),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.denyList.all() })
    },
  })
}

export function useRemoveDenyListMutation() {
  return createMutation<unknown, Error, { storeType: number, storeId: string }>({
    mutationFn: input => commandDenyListRemove(input.storeType, input.storeId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: queryKeys.denyList.all() })
    },
  })
}