关于 graphql-design
graphql-design 是面向 GraphQL 开发者的设计技能,涵盖分页、变更载荷、DataLoader、订阅及常见防护实践。
主要功能
- 01Relay 风格游标分页
- 02包含结果与错误的变更载荷
- 03按请求创建 DataLoader以避免 N+1
- 04订阅模式
- 05查询深度与复杂度限制
- 06模块化 Schema 设计
适用场景
- 01设计列表字段分页
- 02减少重复实体查询
- 03规划变更错误结构
- 04设计带过滤的事件订阅
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ rohitg00/ awesome-claude-code-toolkit --skill graphql-design安装后在 Claude Code 中输入/graphql-design确认已加载。
详细介绍
GraphQL 设计
Schema 设计
type Query {
user(id: ID!): User
users(filter: UserFilter, first: Int = 20, after: String): UserConnection!
}
type Mutation {
createUser(input: CreateUserInput!): CreateUserPayload!
updateUser(id: ID!, input: UpdateUserInput!): UpdateUserPayload!
}
type Subscription {
orderStatusChanged(orderId: ID!): Order!
}
type User {
id: ID!
email: String!
name: String!
orders(first: Int = 10, after: String): OrderConnection!
createdAt: DateTime!
}
input CreateUserInput {
email: String!
name: String!
}
type CreateUserPayload {
user: User
errors: [UserError!]!
}
type UserError {
field: String!
message: String!
}
type UserConnection {
edges: [UserEdge!]!
pageInfo: PageInfo!
totalCount: Int!
}
type UserEdge {
node: User!
cursor: String!
}
type PageInfo {
hasNextPage: Boolean!
endCursor: String
}
使用 Relay 风格的连接进行分页。变更操作应返回同时包含结果和错误的负载类型。
Resolvers
const resolvers: Resolvers = {
Query: {
user: async (_, { id }, ctx) => {
return ctx.dataloaders.user.load(id);
},
users: async (_, { filter, first, after }, ctx) => {
const cursor = after ? decodeCursor(after) : undefined;
const users = await ctx.db.user.findMany({
where: buildFilter(filter),
take: first + 1,
cursor: cursor ? { id: cursor } : undefined,
orderBy: { createdAt: "desc" },
});
const hasNextPage = users.length > first;
const edges = users.slice(0, first).map(user => ({
node: user,
cursor: encodeCursor(user.id),
}));
return {
edges,
pageInfo: {
hasNextPage,
endCursor: edges[edges.length - 1]?.cursor ?? null,
},
};
},
},
Mutation: {
createUser: async (_, { input }, ctx) => {
const existing = await ctx.db.user.findUnique({ where: { email: input.email } });
if (existing) {
return { user: null, errors: [{ field: "email", message: "Already taken" }] };
}
const user = await ctx.db.user.create({ data: input });
return { user, errors: [] };
},
},
User: {
orders: async (parent, { first, after }, ctx) => {
return ctx.dataloaders.userOrders.load({ userId: parent.id, first, after });
},
},
};
使用 DataLoader 防止 N+1 问题
import DataLoader from "dataloader";
function createLoaders(db: Database) {
return {
user: new DataLoader<string, User>(async (ids) => {
const users = await db.user.findMany({ where: { id: { in: [...ids] } } });
const userMap = new Map(users.map(u => [u.id, u]));
return ids.map(id => userMap.get(id) ?? new Error(`User ${id} not found`));
}),
userOrders: new DataLoader<{ userId: string }, Order[]>(async (keys) => {
const userIds = keys.map(k => k.userId);
const orders = await db.order.findMany({
where: { userId: { in: userIds } },
orderBy: { createdAt: "desc" },
});
const grouped = new Map<string, Order[]>();
orders.forEach(o => {
const list = grouped.get(o.userId) ?? [];
list.push(o);
grouped.set(o.userId, list);
});
return keys.map(k => grouped.get(k.userId) ?? []);
}),
};
}
每个请求都创建新的 DataLoader 实例,以避免用户之间出现过期缓存。
Subscriptions
const pubsub = new PubSub();
const resolvers = {
Subscription: {
orderStatusChanged: {
subscribe: (_, { orderId }) => {
return pubsub.asyncIterableIterator(`ORDER_STATUS_${orderId}`);
},
},
},
Mutation: {
updateOrderStatus: async (_, { id, status }, ctx) => {
const order = await ctx.db.order.update({ where: { id }, data: { status } });
await pubsub.publish(`ORDER_STATUS_${id}`, { orderStatusChanged: order });
return { order, errors: [] };
},
},
};
反模式
- 直接将数据库 Schema 暴露为 GraphQL Schema
- 在没有使用 DataLoader 的情况下解析嵌套字段(会导致 N+1 查询)
- 对大型数据集使用基于偏移量的分页,而非基于游标的分页
- 在 Resolver 中抛出原始错误,而非返回带类型的错误负载
- 创建单体 Schema 文件,而非模块化的类型定义
- 允许不受限制的查询,而不设置深度或复杂度限制
检查清单
- 所有列表字段都使用 Relay 风格的游标分页
- 所有批量实体查询都使用 DataLoader
- 变更操作返回同时包含结果和错误字段的负载类型
- 变更操作参数使用输入类型
- 已配置查询深度和复杂度限制
- 在上下文中为每个请求创建 DataLoader 实例
- Schema 已拆分为特定领域的模块
- Subscription 使用经过筛选的主题,避免向所有客户端广播
评论
支持 Markdown