| name | graphql-development |
| description | GraphQL schema design, resolvers, and client integration. Use for building GraphQL APIs and front-end queries. |
🔗 GraphQL Development Skill
Schema Design
Types
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
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)
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
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
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
