Agent skill
graphql-development
GraphQL schema design, resolvers, and client integration. Use for building GraphQL APIs and front-end queries.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/graphql-development
SKILL.md
🔗 GraphQL Development Skill
Schema Design
Types
graphql
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
createdAt: DateTime!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
published: Boolean!
}
input CreatePostInput {
title: String!
content: String!
}
Queries & Mutations
graphql
type Query {
users: [User!]!
user(id: ID!): User
posts(published: Boolean): [Post!]!
}
type Mutation {
createUser(name: String!, email: String!): User!
createPost(input: CreatePostInput!): Post!
deletePost(id: ID!): Boolean!
}
type Subscription {
postCreated: Post!
}
Server Setup (Apollo)
typescript
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
const typeDefs = `#graphql
type Query {
hello: String
}
`;
const resolvers = {
Query: {
hello: () => 'Hello, world!'
}
};
const server = new ApolloServer({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });
Resolvers Pattern
typescript
const resolvers = {
Query: {
users: async (_, __, { dataSources }) => {
return dataSources.userAPI.getUsers();
},
user: async (_, { id }, { dataSources }) => {
return dataSources.userAPI.getUser(id);
}
},
User: {
posts: async (parent, _, { dataSources }) => {
return dataSources.postAPI.getPostsByUser(parent.id);
}
},
Mutation: {
createUser: async (_, { name, email }, { dataSources }) => {
return dataSources.userAPI.createUser({ name, email });
}
}
};
Client Queries
typescript
import { gql, useQuery, useMutation } from '@apollo/client';
const GET_USERS = gql`
query GetUsers {
users {
id
name
email
}
}
`;
function Users() {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return data.users.map(user => <div key={user.id}>{user.name}</div>);
}
Best Practices
| Practice | Description |
|---|---|
| Pagination | Use cursor-based pagination |
| N+1 Problem | Use DataLoader for batching |
| Error Handling | Return errors in extensions |
| Versioning | Avoid, use evolution |
| Caching | Use Apollo Client cache |
Checklist
- Design schema (types, queries, mutations)
- Implement resolvers
- Add data validation
- Handle N+1 with DataLoader
- Set up client Apollo/urql
- Add error handling
Didn't find tool you were looking for?