Skip to main content
skill CX Codex

graphql-development — Claude Code skill: GraphQL rules

A skill that gives the agent GraphQL guidelines: schema design, type-safe clients, React and Next.js integration. Useful when it writes resolvers and queries.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add Mindrally/skills --skill graphql-development -a claude-code
Open on GitHub

What graphql-development does

The skill sets boundaries for how the agent handles GraphQL work. It covers schema design: PascalCase type names, camelCase fields, input types for mutations, enums for fixed value sets, interfaces and union types for polymorphic returns. Pagination by cursor or offset gets its own section, along with connection patterns between types.

Query performance is handled through fetching only required fields, fragments, DataLoader batching and avoiding N+1 in resolvers. Among clients it names Genql for generating TypeScript types from the schema, Apollo Client with cache policies and optimistic updates, and urql with document caching and exchanges. React gets hooks for queries and mutations; Next.js gets Server Components for initial data and hydration patterns.

Separate blocks cover errors, security and testing: structured errors from resolvers, query depth limiting, complexity analysis, field-level authorization, schema validation in CI/CD. Everything here is prose. The skill changes how the agent reasons about your codebase rather than running anything itself, so on a project without GraphQL it does nothing for you.

What it helps with

  • design a schema with consistent type and field naming
  • kill N+1 queries with DataLoader in resolvers
  • set Apollo Client cache policies for a specific screen
  • wire Next.js Server Components to a GraphQL query
  • cap query depth and complexity on incoming requests

Example prompts for the agent

  • Design a GraphQL schema for orders: types, mutation input types, an enum for statuses
  • Find why resolvers produce N+1 queries and fix it with DataLoader
  • Configure Apollo Client cache policies and an optimistic update after a mutation

How to install graphql-development

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill graphql-development -a claude-code

2Manually: put the files in place

~/.claude/skills/graphql-development/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/graphql-development/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about graphql-development

How do I install graphql-development in Claude?

Run npx skills add Mindrally/skills --skill graphql-development -a claude-code. The skill file lands at ~/.claude/skills/graphql-development/SKILL.md.

What does graphql-development do?

It hands the agent GraphQL development guidelines: schema design, query optimization, type-safe clients, and React and Next.js integration patterns.

Does the skill add code or dependencies to my project?

No. It is written guidance only, so it shapes how the agent writes resolvers and queries without installing or running anything.

Source text

SKILL.md · Apache-2.0
---
name: graphql-development
description: GraphQL development guidelines with type-safe clients, schema design, and integration with React and Next.js.
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# GraphQL Development

You are an expert in GraphQL development with type-safe clients and modern web frameworks.

## Core Principles

- Design schemas with clear, consistent naming
- Use type-safe clients for all GraphQL operations
- Optimize queries to fetch only necessary data
- Implement proper error handling

## Schema Design

### Types and Fields
- Use descriptive type names in PascalCase
- Field names in camelCase
- Use nullable types appropriately
- Implement input types for mutations
- Use enums for fixed value sets

### Relationships
- Define clear connection patterns
- Implement pagination with cursor-based or offset patterns
- Use interfaces for shared fields
- Implement union types for polymorphic returns

## Query Optimization

- Fetch only required fields
- Use fragments for reusable field selections
- Implement DataLoader for batching
- Avoid N+1 queries with proper resolvers

## Type-Safe Clients

### Genql
- Generate TypeScript types from schema
- Use type-safe query builders
- Leverage IDE autocompletion

### Apollo Client
- Configure cache policies properly
- Use reactive variables for local state
- Implement optimistic updates
- Handle loading and error states

### urql
- Use document caching effectively
- Implement exchanges for customization
- Handle subscriptions properly

## Integration Patterns

### React
- Use hooks for queries and mutations
- Handle loading and error states in components
- Implement proper cache updates

### Next.js
- Use Server Components for initial data
- Implement proper hydration patterns
- Handle auth in GraphQL context

## Error Handling

- Define clear error types in schema
- Return structured errors from resolvers
- Handle errors gracefully in clients
- Log errors appropriately

## Security

- Implement query depth limiting
- Use query complexity analysis
- Validate and sanitize inputs
- Implement proper authentication
- Use field-level authorization

## Testing

- Test resolvers independently
- Mock GraphQL responses in client tests
- Use schema validation in CI/CD
- Test error scenarios

© Mindrally · Apache-2.0 · Mindrally/skills

Similar skills

Everything for Backend and APIs →

From the same set168

react-native-cursor-rules A rule set that tells your coding agent how to write React Native: typed TypeScript, functional components, fewer re-renders, tuned FlatLists. CX Codex +1 670installs netlify-development A skill that gives your agent Netlify build and deploy rules: serverless and edge functions, Blobs, Image CDN, build config. Useful when it writes functions or edits netlify.toml. CX Codex +1 665installs viewcomfy-api-rules Guides an agent through wiring the ViewComfy API into a Python and FastAPI web app: flatten workflow params, call the endpoint, save the returned files. CX Codex +1 663installs salesforce-development A skill that gives your agent Salesforce coding rules: Apex, triggers, Lightning Web Components, SOQL and metadata. Useful when you build on the platform and want the agent to respect its limits. CX Codex +1 659installs turborepo A skill that tells the agent how to configure Turborepo: workspace layout, turbo.json, caching and task filters. Useful once the monorepo already exists. CX Codex +1 658installs rollup-bundler This skill gives your agent Rollup.js rules: output formats, external dependencies, tree-shaking and the plugins needed to bundle a library. CX Codex +1 657installs serverless A skill that gives the agent rules for FastAPI services in serverless and microservice setups: AWS Lambda, Azure Functions, API gateways. CX Codex +1 655installs convex Tells the agent how to write Convex code: queries, mutations, actions, indexes and file uploads. Useful once Convex is your backend. CX Codex +1 651installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor