graphql-operations by apollographql/skills
npx skills add https://github.com/apollographql/skills --skill graphql-operations本指南涵盖了作为客户端开发者编写 GraphQL 操作(查询、变更、订阅)的最佳实践。编写良好的操作应具备高效、类型安全且易于维护的特点。
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}
mutation CreatePost($input: CreatePostInput!) {
createPost(input: $input) {
id
title
createdAt
}
}
subscription OnMessageReceived($channelId: ID!) {
messageReceived(channelId: $channelId) {
id
content
sender {
id
name
}
}
}
| 模式 | 示例 |
|---|---|
| 查询 | GetUser, , |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
ListPostsSearchProducts| 变更 | CreateUser, UpdatePost, DeleteComment |
| 订阅 | OnMessageReceived, OnUserStatusChanged |
# 必需变量
query GetUser($id: ID!) { ... }
# 带默认值的可选变量
query ListPosts($first: Int = 20) { ... }
# 多个变量
query SearchPosts($query: String!, $status: PostStatus, $first: Int = 10) { ... }
# 定义片段
fragment UserBasicInfo on User {
id
name
avatarUrl
}
# 使用片段
query GetUser($id: ID!) {
user(id: $id) {
...UserBasicInfo
email
}
}
query GetUser($id: ID!, $includeEmail: Boolean!) {
user(id: $id) {
id
name
email @include(if: $includeEmail)
}
}
query GetPosts($skipDrafts: Boolean!) {
posts {
id
title
draft @skip(if: $skipDrafts)
}
}
# 良好:指定字段
query GetUserName($id: ID!) {
user(id: $id) {
id
name
}
}
# 避免:过度获取
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
bio
posts {
id
title
content
comments {
id
}
}
followers {
id
name
}
# ... 许多未使用的字段
}
}
# 良好:命名操作
query GetUserPosts($userId: ID!) {
user(id: $userId) {
posts {
id
title
}
}
}
# 避免:匿名操作
query {
user(id: "123") {
posts {
id
title
}
}
}
# 良好:使用变量
query GetUser($id: ID!) {
user(id: $id) {
id
name
}
}
# 避免:硬编码值
query {
user(id: "123") {
id
name
}
}
// UserAvatar.tsx
export const USER_AVATAR_FRAGMENT = gql`
fragment UserAvatar on User {
id
name
avatarUrl
}
`;
function UserAvatar({ user }) {
return <img src={user.avatarUrl} alt={user.name} />;
}
特定主题的详细文档:
id 字段@include/@skip 处理条件字段每周安装量
681
代码仓库
GitHub 星标数
33
首次出现
2026年1月23日
安全审计
已安装于
claude-code552
opencode545
codex537
gemini-cli528
github-copilot526
amp470
This guide covers best practices for writing GraphQL operations (queries, mutations, subscriptions) as a client developer. Well-written operations are efficient, type-safe, and maintainable.
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}
mutation CreatePost($input: CreatePostInput!) {
createPost(input: $input) {
id
title
createdAt
}
}
subscription OnMessageReceived($channelId: ID!) {
messageReceived(channelId: $channelId) {
id
content
sender {
id
name
}
}
}
| Pattern | Example |
|---|---|
| Query | GetUser, ListPosts, SearchProducts |
| Mutation | CreateUser, UpdatePost, DeleteComment |
| Subscription | OnMessageReceived, OnUserStatusChanged |
# Required variable
query GetUser($id: ID!) { ... }
# Optional variable with default
query ListPosts($first: Int = 20) { ... }
# Multiple variables
query SearchPosts($query: String!, $status: PostStatus, $first: Int = 10) { ... }
# Define fragment
fragment UserBasicInfo on User {
id
name
avatarUrl
}
# Use fragment
query GetUser($id: ID!) {
user(id: $id) {
...UserBasicInfo
email
}
}
query GetUser($id: ID!, $includeEmail: Boolean!) {
user(id: $id) {
id
name
email @include(if: $includeEmail)
}
}
query GetPosts($skipDrafts: Boolean!) {
posts {
id
title
draft @skip(if: $skipDrafts)
}
}
# Good: Specific fields
query GetUserName($id: ID!) {
user(id: $id) {
id
name
}
}
# Avoid: Over-fetching
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
bio
posts {
id
title
content
comments {
id
}
}
followers {
id
name
}
# ... many unused fields
}
}
# Good: Named operation
query GetUserPosts($userId: ID!) {
user(id: $userId) {
posts {
id
title
}
}
}
# Avoid: Anonymous operation
query {
user(id: "123") {
posts {
id
title
}
}
}
# Good: Variables
query GetUser($id: ID!) {
user(id: $id) {
id
name
}
}
# Avoid: Hardcoded values
query {
user(id: "123") {
id
name
}
}
// UserAvatar.tsx
export const USER_AVATAR_FRAGMENT = gql`
fragment UserAvatar on User {
id
name
avatarUrl
}
`;
function UserAvatar({ user }) {
return <img src={user.avatarUrl} alt={user.name} />;
}
Detailed documentation for specific topics:
id field for cacheable types@include/@skip for conditional fieldsWeekly Installs
681
Repository
GitHub Stars
33
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code552
opencode545
codex537
gemini-cli528
github-copilot526
amp470
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
Gemini Interactions API 指南:统一接口、智能体交互与服务器端状态管理
833 周安装
Apollo MCP 服务器:让AI代理通过GraphQL API交互的完整指南
834 周安装
智能体记忆系统构建指南:分块策略、向量存储与检索优化
835 周安装
Scrapling官方网络爬虫框架 - 自适应解析、绕过Cloudflare、Python爬虫库
836 周安装
抽奖赢家选取器 - 随机选择工具,支持CSV、Excel、Google Sheets,公平透明
838 周安装
Medusa 前端开发指南:使用 SDK、React Query 构建电商商店
839 周安装