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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
graphql-yoga.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
graphql-yogaフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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
ベストプラクティス
- Envelop plugins — 認証、キャッシュ、レート制限、ロギングにはプラグインシステムを使用します。構成可能で再利用可能です。
- Response caching — パブリッククエリにはレスポンスキャッシュを有効にします。認証されたクエリにはセッションごとにキャッシュします。
- Depth limiting — クエリの最大深度 (10-15) を設定して、深くネストされたクエリによる悪用を防ぎます。
- Error masking — 本番環境で有効にします。内部エラーの詳細がクライアントに漏洩するのを防ぎます。
- Subscriptions — 組み込みの SSE および WebSocket サポート。リアルタイム更新には PubSub を使用します。
- File uploads — ネイティブの multipart サポート。ファイルアップロードの mutation に追加のライブラリは不要です。
- Any runtime — 同じコードで Node.js, Deno, Bun, CF Workers, Lambda にデプロイします。ランタイムに依存しません。
- 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
- Envelop plugins — Use the plugin system for auth, caching, rate limiting, logging; composable and reusable
- Response caching — Enable response cache for public queries; cache by session for authenticated queries
- Depth limiting — Set max query depth (10-15) to prevent abuse from deeply nested queries
- Error masking — Enable in production; prevents leaking internal error details to clients
- Subscriptions — Built-in SSE and WebSocket support; use PubSub for real-time updates
- File uploads — Native multipart support; no extra libraries needed for file upload mutations
- Any runtime — Deploy to Node.js, Deno, Bun, CF Workers, Lambda with the same code; runtime-agnostic
- DataLoader for N+1 — Use DataLoader in resolvers to batch database queries; prevents N+1 query problem