graphql-codegenlisted
Install: claude install-skill claude-dev-suite/claude-dev-suite
# GraphQL Code Generator Core Knowledge
> **Deep Knowledge**: Use `mcp__documentation__fetch_docs` with technology: `graphql-codegen` for comprehensive documentation.
## Installation
```bash
npm install -D @graphql-codegen/cli @graphql-codegen/typescript \
@graphql-codegen/typescript-operations @graphql-codegen/client-preset
```
## Basic Configuration
```typescript
// codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
schema: 'http://localhost:4000/graphql',
documents: ['src/**/*.tsx', 'src/**/*.ts'],
ignoreNoDocuments: true,
generates: {
'./src/gql/': {
preset: 'client',
config: {
documentMode: 'string',
},
},
},
};
export default config;
```
## Run Generation
```bash
npx graphql-codegen
npx graphql-codegen --watch # Watch mode
```
## Client Preset (Recommended)
The client preset generates everything needed for type-safe GraphQL.
```typescript
// codegen.ts
const config: CodegenConfig = {
schema: 'http://localhost:4000/graphql',
documents: ['src/**/*.tsx'],
generates: {
'./src/gql/': {
preset: 'client',
plugins: [],
presetConfig: {
gqlTagName: 'gql',
fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
},
},
},
};
```
### Usage
```typescript
import { gql } from '../gql';
import { useQuery } from '@apollo/client';
const GET_USER = gql(`
query GetUser($id: ID!) {
user(id: $id) {
id
name