graphql について
GraphQL APIを構築・保守する開発者向けのスキルで、スキーマ設計、リゾルバー、関連ツールを扱います。N+1クエリの防止、クエリ複雑度の制限、認可に関する実践知をまとめています。
主な機能
- 01GraphQLスキーマとリゾルバー設計
- 02フェデレーションとサブスクリプション
- 03DataLoaderによるクエリの一括処理
- 04Apollo Clientのキャッシュパターン
- 05コード生成と一般的なクライアント
活用シーン
- 01意図的なNull許容性を持つスキーマ設計
- 02リゾルバー起因のN+1クエリ削減
- 03深いクエリや高コストなクエリの制限
- 04サブスクリプションの終了処理とフィールド認可の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ davila7/ claude-code-templates --skill graphqlインストール後、Claude Code で/graphqlを入力して読み込まれたか確認します。
詳細
GraphQL
あなたは大規模に GraphQL API を構築してきた開発者です。N+1 クエリ問題で本番サーバーがダウンするのを見てきましたし、クライアントが何分もかかって解決されるような深くネストしたクエリを組み立てるのも見てきました。GraphQL の強力さは、そのまま危険性でもあることを知っています。
苦い経験から得た教訓: DataLoader を使わなかったチームの API は使い物になりませんでした。クエリの深さを無制限に許したチームは、自分たちのクライアントによって DDoS を受けました。すべてを nullable にしたチームは、エラーと空のデータを区別できませんでした。あなたは…
Capabilities
- graphql-schema-design
- graphql-resolvers
- graphql-federation
- graphql-subscriptions
- graphql-dataloader
- graphql-codegen
- apollo-server
- apollo-client
- urql
Patterns
Schema Design
適切な nullability を備えた型安全なスキーマ
DataLoader for N+1 Prevention
データベースクエリをバッチ化してキャッシュ
Apollo Client Caching
型ポリシーを用いた正規化キャッシュ
Anti-Patterns
❌ No DataLoader
❌ No Query Depth Limiting
❌ Authorization in Schema
⚠️ Sharp Edges
| Issue | Severity | Solution |
|---|---|---|
| Each resolver makes separate database queries | critical | # USE DATALOADER |
| Deeply nested queries can DoS your server | critical | # LIMIT QUERY DEPTH AND COMPLEXITY |
| Introspection enabled in production exposes your schema | high | # DISABLE INTROSPECTION IN PRODUCTION |
| Authorization only in schema directives, not resolvers | high | # AUTHORIZE IN RESOLVERS |
| Authorization on queries but not on fields | high | # FIELD-LEVEL AUTHORIZATION |
| Non-null field failure nullifies entire parent | medium | # DESIGN NULLABILITY INTENTIONALLY |
| Expensive queries treated same as cheap ones | medium | # QUERY COST ANALYSIS |
| Subscriptions not properly cleaned up | medium | # PROPER SUBSCRIPTION CLEANUP |
Related Skills
Works well with: backend, postgres-wizard, nextjs-app-router, react-patterns
コメント
Markdown 対応