graphql-development について
モダンな Web フレームワーク向けに GraphQL のスキーマとクライアントを構築する開発スキルです。クエリ効率、型安全性、エラー処理、セキュリティ、テストを扱います。
主な機能
- 01スキーマとリレーション設計
- 02クエリ最適化とバッチ処理
- 03型安全なクライアントの指針
- 04React と Next.js の統合
- 05セキュリティとエラー処理
- 06リゾルバーとクライアントのテスト
活用シーン
- 01GraphQL スキーマの設計
- 02過剰取得と N+1 クエリの削減
- 03Web アプリ向け型安全クライアントの構築
- 04リゾルバーとクライアントエラーのテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/graphql-developmentを入力して読み込まれたか確認します。
詳細
GraphQL 開発
型安全なクライアントと最新のウェブフレームワークを用いた GraphQL 開発のエキスパートです。
基本原則
- 明確で一貫性のある命名でスキーマを設計します
- すべての GraphQL 操作に型安全なクライアントを使用します
- 必要なデータだけを取得するようにクエリを最適化します
- 適切なエラーハンドリングを実装します
スキーマ設計
型とフィールド
- 説明的な型名を PascalCase で使用します
- フィールド名には camelCase を使用します
- nullable 型を適切に使用します
- ミューテーション用の入力型を実装します
- 固定値の集合には enum を使用します
リレーションシップ
- 明確なコネクションパターンを定義します
- カーソルベースまたはオフセットベースのパターンでページネーションを実装します
- 共通フィールドにはインターフェースを使用します
- 多態的な戻り値にはユニオン型を実装します
クエリの最適化
- 必要なフィールドだけを取得します
- 再利用可能なフィールド選択にはフラグメントを使用します
- バッチ処理には DataLoader を実装します
- 適切なリゾルバーを使用して N+1 クエリを回避します
型安全なクライアント
Genql
- スキーマから TypeScript の型を生成します
- 型安全なクエリビルダーを使用します
- IDE の自動補完を活用します
Apollo Client
- キャッシュポリシーを適切に設定します
- ローカル状態にはリアクティブ変数を使用します
- 楽観的更新を実装します
- ローディング状態とエラー状態を処理します
urql
- ドキュメントキャッシュを効果的に使用します
- カスタマイズ用のエクスチェンジを実装します
- サブスクリプションを適切に処理します
統合パターン
React
- クエリとミューテーションにはフックを使用します
- コンポーネント内でローディング状態とエラー状態を処理します
- 適切なキャッシュ更新を実装します
Next.js
- 初期データには Server Components を使用します
- 適切なハイドレーションパターンを実装します
- GraphQL コンテキストで認証を処理します
エラーハンドリング
- スキーマで明確なエラー型を定義します
- リゾルバーから構造化されたエラーを返します
- クライアントでエラーを適切に処理します
- エラーを適切にログに記録します
セキュリティ
- クエリの深さ制限を実装します
- クエリ複雑度分析を使用します
- 入力を検証してサニタイズします
- 適切な認証を実装します
- フィールドレベルの認可を使用します
テスト
- リゾルバーを個別にテストします
- クライアントテストで GraphQL のレスポンスをモックします
- CI/CD でスキーマ検証を使用します
- エラーシナリオをテストします
コメント
Markdown 対応