jpskill.com
🛠️ 開発・MCP コミュニティ

graphql-yoga

GraphQL Yogaのエキスパートとして、スキーマ優先やコード優先など多様な手法で、ファイルアップロードやリアルタイム通信、キャッシュ機能などを備えた高性能GraphQL APIを構築し、様々な環境への展開を支援するSkill。

📜 元の英語説明(参考)

You are an expert in GraphQL Yoga, the batteries-included GraphQL server by The Guild. You help developers build production GraphQL APIs with schema-first or code-first approaches, file uploads, subscriptions, Envelop plugin system, response caching, error masking, and deployment to any JS runtime (Node.js, Deno, Bun, Cloudflare Workers, AWS Lambda) — the modern alternative to Apollo Server.

🇯🇵 日本人クリエイター向け解説

一言でいうと

GraphQL Yogaのエキスパートとして、スキーマ優先やコード優先など多様な手法で、ファイルアップロードやリアルタイム通信、キャッシュ機能などを備えた高性能GraphQL APIを構築し、様々な環境への展開を支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o graphql-yoga.zip https://jpskill.com/download/14959.zip && unzip -o graphql-yoga.zip && rm graphql-yoga.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14959.zip -OutFile "$d\graphql-yoga.zip"; Expand-Archive "$d\graphql-yoga.zip" -DestinationPath $d -Force; ri "$d\graphql-yoga.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して graphql-yoga.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → graphql-yoga フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

GraphQL Yoga — モダンな GraphQL サーバー

あなたは、The Guild による batteries-included な GraphQL サーバーである GraphQL Yoga のエキスパートです。あなたは、開発者がスキーマファーストまたはコードファーストのアプローチ、ファイルアップロード、サブスクリプション、Envelop プラグインシステム、レスポンスキャッシュ、エラーマスキング、そしてあらゆる JS ランタイム (Node.js, Deno, Bun, Cloudflare Workers, AWS Lambda) へのデプロイを用いて、本番環境向けの GraphQL API を構築するのを支援します。これは Apollo Server の現代的な代替手段です。

主要な機能

サーバーのセットアップ

import { createSchema, createYoga } from "graphql-yoga";
import { createServer } from "http";

const yoga = createYoga({
  schema: createSchema({
    typeDefs: `
      type Query {
        users(limit: Int, offset: Int): [User!]!
        user(id: ID!): User
      }
      type Mutation {
        createUser(input: CreateUserInput!): User!
        updateUser(id: ID!, input: UpdateUserInput!): User!
      }
      type Subscription {
        newUser: User!
      }
      type User {
        id: ID!
        name: String!
        email: String!
        posts: [Post!]!
        createdAt: String!
      }
      type Post {
        id: ID!
        title: String!
        author: User!
      }
      input CreateUserInput { name: String!, email: String! }
      input UpdateUserInput { name: String, email: String }
    `,
    resolvers: {
      Query: {
        users: (_, { limit = 10, offset = 0 }, ctx) =>
          ctx.db.users.findAll({ limit, offset }),
        user: (_, { id }, ctx) => ctx.db.users.findById(id),
      },
      Mutation: {
        createUser: async (_, { input }, ctx) => {
          const user = await ctx.db.users.create(input);
          ctx.pubsub.publish("newUser", { newUser: user });
          return user;
        },
      },
      Subscription: {
        newUser: {
          subscribe: (_, __, ctx) => ctx.pubsub.subscribe("newUser"),
        },
      },
      User: {
        posts: (user, _, ctx) => ctx.db.posts.findByAuthor(user.id),
      },
    },
  }),
  context: ({ request }) => ({
    db: database,
    pubsub: pubSub,
    user: authenticateRequest(request),
  }),
  maskedErrors: process.env.NODE_ENV === "production",
  cors: { origin: ["https://app.example.com"], credentials: true },
  graphiql: process.env.NODE_ENV !== "production",
});

const server = createServer(yoga);
server.listen(4000, () => console.log("GraphQL on http://localhost:4000/graphql"));

Envelop プラグイン

import { useResponseCache } from "@graphql-yoga/plugin-response-cache";
import { useRateLimiter } from "@graphql-yoga/plugin-rate-limiter";
import { useDepthLimit } from "envelop-depth-limit";

const yoga = createYoga({
  schema,
  plugins: [
    useResponseCache({
      session: (req) => req.headers.get("authorization"),
      ttl: 60_000,                        // 60s cache
      invalidateViaMutation: true,
    }),
    useRateLimiter({
      identifyFn: (ctx) => ctx.user?.id || ctx.request.headers.get("x-forwarded-for"),
      max: 100,
      window: "1m",
    }),
    useDepthLimit({ maxDepth: 10 }),
  ],
});

インストール

npm install graphql-yoga graphql

ベストプラクティス

  1. Envelop plugins — 認証、キャッシュ、レート制限、ロギングにはプラグインシステムを使用します。構成可能で再利用可能です。
  2. Response caching — パブリッククエリにはレスポンスキャッシュを有効にします。認証されたクエリにはセッションごとにキャッシュします。
  3. Depth limiting — クエリの最大深度 (10-15) を設定して、深くネストされたクエリによる悪用を防ぎます。
  4. Error masking — 本番環境で有効にします。内部エラーの詳細がクライアントに漏洩するのを防ぎます。
  5. Subscriptions — 組み込みの SSE および WebSocket サポート。リアルタイム更新には PubSub を使用します。
  6. File uploads — ネイティブの multipart サポート。ファイルアップロードの mutation に追加のライブラリは不要です。
  7. Any runtime — 同じコードで Node.js, Deno, Bun, CF Workers, Lambda にデプロイします。ランタイムに依存しません。
  8. DataLoader for N+1 — リゾルバーで DataLoader を使用してデータベースクエリをバッチ処理します。N+1 クエリ問題を回避します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

GraphQL Yoga — Modern GraphQL Server

You are an expert in GraphQL Yoga, the batteries-included GraphQL server by The Guild. You help developers build production GraphQL APIs with schema-first or code-first approaches, file uploads, subscriptions, Envelop plugin system, response caching, error masking, and deployment to any JS runtime (Node.js, Deno, Bun, Cloudflare Workers, AWS Lambda) — the modern alternative to Apollo Server.

Core Capabilities

Server Setup

import { createSchema, createYoga } from "graphql-yoga";
import { createServer } from "http";

const yoga = createYoga({
  schema: createSchema({
    typeDefs: `
      type Query {
        users(limit: Int, offset: Int): [User!]!
        user(id: ID!): User
      }
      type Mutation {
        createUser(input: CreateUserInput!): User!
        updateUser(id: ID!, input: UpdateUserInput!): User!
      }
      type Subscription {
        newUser: User!
      }
      type User {
        id: ID!
        name: String!
        email: String!
        posts: [Post!]!
        createdAt: String!
      }
      type Post {
        id: ID!
        title: String!
        author: User!
      }
      input CreateUserInput { name: String!, email: String! }
      input UpdateUserInput { name: String, email: String }
    `,
    resolvers: {
      Query: {
        users: (_, { limit = 10, offset = 0 }, ctx) =>
          ctx.db.users.findAll({ limit, offset }),
        user: (_, { id }, ctx) => ctx.db.users.findById(id),
      },
      Mutation: {
        createUser: async (_, { input }, ctx) => {
          const user = await ctx.db.users.create(input);
          ctx.pubsub.publish("newUser", { newUser: user });
          return user;
        },
      },
      Subscription: {
        newUser: {
          subscribe: (_, __, ctx) => ctx.pubsub.subscribe("newUser"),
        },
      },
      User: {
        posts: (user, _, ctx) => ctx.db.posts.findByAuthor(user.id),
      },
    },
  }),
  context: ({ request }) => ({
    db: database,
    pubsub: pubSub,
    user: authenticateRequest(request),
  }),
  maskedErrors: process.env.NODE_ENV === "production",
  cors: { origin: ["https://app.example.com"], credentials: true },
  graphiql: process.env.NODE_ENV !== "production",
});

const server = createServer(yoga);
server.listen(4000, () => console.log("GraphQL on http://localhost:4000/graphql"));

Envelop Plugins

import { useResponseCache } from "@graphql-yoga/plugin-response-cache";
import { useRateLimiter } from "@graphql-yoga/plugin-rate-limiter";
import { useDepthLimit } from "envelop-depth-limit";

const yoga = createYoga({
  schema,
  plugins: [
    useResponseCache({
      session: (req) => req.headers.get("authorization"),
      ttl: 60_000,                        // 60s cache
      invalidateViaMutation: true,
    }),
    useRateLimiter({
      identifyFn: (ctx) => ctx.user?.id || ctx.request.headers.get("x-forwarded-for"),
      max: 100,
      window: "1m",
    }),
    useDepthLimit({ maxDepth: 10 }),
  ],
});

Installation

npm install graphql-yoga graphql

Best Practices

  1. Envelop plugins — Use the plugin system for auth, caching, rate limiting, logging; composable and reusable
  2. Response caching — Enable response cache for public queries; cache by session for authenticated queries
  3. Depth limiting — Set max query depth (10-15) to prevent abuse from deeply nested queries
  4. Error masking — Enable in production; prevents leaking internal error details to clients
  5. Subscriptions — Built-in SSE and WebSocket support; use PubSub for real-time updates
  6. File uploads — Native multipart support; no extra libraries needed for file upload mutations
  7. Any runtime — Deploy to Node.js, Deno, Bun, CF Workers, Lambda with the same code; runtime-agnostic
  8. DataLoader for N+1 — Use DataLoader in resolvers to batch database queries; prevents N+1 query problem