frontend-query-mutation

フロントエンドのクエリとミューテーション

目的

• API フックは controllers/API/queries/{domain}/ に配置し、整理された信頼できる情報源として維持します。
• UseRequestProcessor を使用して、再試行、無効化、エラー処理を一貫させます。
• すべての HTTP 呼び出しには Axios の api インスタンスを使用します（REST に生の fetch は使用しません）。
• ストリーミング処理（ビルド、チャット）には performStreamingRequest() を使用します。
• キャッシュの無効化は、ミューテーションの onSettled コールバックで行います。

アーキテクチャの概要

Langflow は、データ取得に Axios + TanStack React Query v5 を使用します。oRPC やコントラクト層はありません。アーキテクチャは次のとおりです。

Component
  -> API hook (controllers/API/queries/{domain}/use-{verb}-{resource}.ts)
    -> UseRequestProcessor (controllers/API/services/request-processor.ts)
      -> useQuery / useMutation (TanStack React Query)
        -> queryFn / mutationFn
          -> api.get/post/patch/delete (Axios instance from controllers/API/api.tsx)

主なファイル

ファイル	目的
controllers/API/api.tsx	Axios インスタンス、ApiInterceptor コンポーネント、performStreamingRequest()
controllers/API/services/request-processor.ts	useQuery／useMutation を、再試行のデフォルト値とともにラップする UseRequestProcessor フック
controllers/API/helpers/constants.ts	URL 定数（URLs）と getURL() ヘルパー
controllers/API/queries/{domain}/	ドメイン別に整理されたクエリおよびミューテーションフック
types/api/index.ts	useQueryFunctionType、useMutationFunctionType の型ヘルパー
stores/	クライアント側の状態を管理する Zustand ストア

ワークフロー

1. 変更範囲を特定します。
   • フックの構成、命名、URL パターン、クエリ／ミューテーションの呼び出し箇所の形式については、references/query-patterns.md を読みます。
   • 条件付きクエリ、無効化、エラー処理、ストリーミングについては、references/runtime-rules.md を読みます。
   • フックの作成とランタイムの動作にまたがるタスクでは、両方のリファレンスを読みます。
2. 既存のパターンに従ってフックを実装します。
   • query() と mutate() のラッパーには UseRequestProcessor を使用します。
   • すべての HTTP 呼び出しには Axios の api インスタンスを使用します。
   • API パスの構築には getURL() を使用します。
   • useQueryFunctionType または useMutationFunctionType を使用してフックに型を指定します。
3. Langflow の規約を守ります。
   • クエリキーは、フック名を含む配列です：["useGetFlows"]。
   • ミューテーションでは、onSettled で関連するクエリを無効化します。
   • Zustand ストアの更新は、コンポーネントではなくクエリ／ミューテーション関数内で行います。
   • UseRequestProcessor は、指数バックオフを伴うデフォルトの再試行（クエリは 5 回、ミューテーションは 3 回）を提供します。

よく変更するファイル

• controllers/API/queries/{domain}/use-get-*.ts（クエリフック）
• controllers/API/queries/{domain}/use-post-*.ts（作成ミューテーション）
• controllers/API/queries/{domain}/use-patch-*.ts（更新ミューテーション）
• controllers/API/queries/{domain}/use-delete-*.ts（削除ミューテーション）
• controllers/API/helpers/constants.ts（URL 定数）
• types/api/index.ts（API 型定義）
• stores/（クエリによって実行される Zustand ストアの更新）

リファレンス

• フックの構成、命名規則、ディレクトリ構成、アンチパターンについては、references/query-patterns.md を使用します。
• 条件付きクエリ、無効化、mutate と mutateAsync の違い、エラー処理、ストリーミングリクエストについては、references/runtime-rules.md を使用します。

このスキルを、Langflow のフロントエンド作業におけるクエリとミューテーションの唯一のエントリーポイントとして扱います。詳細なルールはプロジェクトのドキュメントに重複して記載せず、リファレンスファイルにまとめてください。