> graphql-implementation
Builds GraphQL APIs with schema design, resolvers, error handling, and performance optimization using Apollo or Graphene. Use when creating flexible query APIs, migrating from REST, or implementing real-time subscriptions.
curl "https://skillshub.wtf/secondsky/claude-skills/graphql-implementation?format=md"GraphQL Implementation
Build GraphQL APIs with proper schema design, resolvers, and performance optimization.
Schema Definition
type User {
id: ID!
name: String!
email: String!
posts(limit: Int = 10): [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
createdAt: DateTime!
}
type Query {
user(id: ID!): User
users(limit: Int, offset: Int): [User!]!
post(id: ID!): Post
}
type Mutation {
createUser(input: CreateUserInput!): User!
createPost(input: CreatePostInput!): Post!
}
input CreateUserInput {
name: String!
email: String!
}
Apollo Server Setup
const { ApolloServer } = require('@apollo/server');
const { startStandaloneServer } = require('@apollo/server/standalone');
const resolvers = {
Query: {
user: (_, { id }, { dataSources }) =>
dataSources.userAPI.getUser(id),
users: (_, { limit, offset }, { dataSources }) =>
dataSources.userAPI.getUsers({ limit, offset })
},
User: {
posts: (user, { limit }, { dataSources }) =>
dataSources.postAPI.getPostsByUser(user.id, limit)
},
Mutation: {
createUser: (_, { input }, { dataSources }) =>
dataSources.userAPI.createUser(input)
}
};
const server = new ApolloServer({ typeDefs, resolvers });
DataLoader for N+1 Prevention
const DataLoader = require('dataloader');
const userLoader = new DataLoader(async (ids) => {
const users = await User.find({ _id: { $in: ids } });
return ids.map(id => users.find(u => u.id === id));
});
Error Handling
const { GraphQLError } = require('graphql');
throw new GraphQLError('User not found', {
extensions: { code: 'NOT_FOUND', argumentName: 'id' }
});
Best Practices
- Use DataLoader to batch queries
- Implement query complexity limits
- Design schema around client needs
- Validate all inputs
- Use descriptive naming conventions
Python Graphene
See references/python-graphene.md for complete Flask implementation with:
- ObjectType definitions
- Query and Mutation classes
- Input types
- Flask integration
Best Practices
Do:
- Use DataLoader to batch queries
- Implement query complexity limits
- Design schema around client needs
- Validate all inputs
- Use descriptive naming conventions
- Add subscriptions for real-time data
Don't:
- Allow deeply nested queries without limits
- Expose database internals
- Ignore N+1 query problems
- Return unauthorized data
- Skip input validation
> related_skills --same-repo
> zustand-state-management
--- name: zustand-state-management description: Zustand state management for React with TypeScript. Use for global state, Redux/Context API migration, localStorage persistence, slices pattern, devtools, Next.js SSR, or encountering hydration errors, TypeScript inference issues, persist middleware problems, infinite render loops. Keywords: zustand, state management, React state, TypeScript state, persist middleware, devtools, slices pattern, global state, React hooks, create store, useBoundS
> zod
TypeScript-first schema validation and type inference. Use for validating API requests/responses, form data, env vars, configs, defining type-safe schemas with runtime validation, transforming data, generating JSON Schema for OpenAPI/AI, or encountering missing validation errors, type inference issues, validation error handling problems. Zero dependencies (2kb gzipped).
> xss-prevention
--- name: xss-prevention description: XSS attack prevention with input sanitization, output encoding, Content Security Policy. Use for user-generated content, rich text editors, web application security, or encountering stored XSS, reflected XSS, DOM manipulation, script injection errors. Keywords: sanitization, HTML-encoding, DOMPurify, CSP, Content-Security-Policy, rich-text-editor, user-input, escaping, innerHTML, DOM-manipulation, stored-XSS, reflected-XSS, input-validation, output-encodi
> wordpress-plugin-core
--- name: wordpress-plugin-core description: WordPress plugin development with hooks, security, REST API, custom post types. Use for plugin creation, $wpdb queries, Settings API, or encountering SQL injection, XSS, CSRF, nonce errors. Keywords: wordpress plugin development, wordpress security, wordpress hooks, wordpress filters, wordpress database, wpdb prepare, sanitize_text_field, esc_html, wp_nonce, custom post type, register_post_type, settings api, rest api, admin-ajax, wordpress sql inj