Working with GraphQL Tools
1. Using GraphQL Code Generator
Example: codegen.ts
import type { CodegenConfig } from "@graphql-codegen/cli";
const config: CodegenConfig = {
schema: "http://localhost:4000/graphql",
documents: "src/**/*.graphql",
generates: {
"src/gql/": { preset: "client", plugins: [] }
}
};
export default config;
2. Generating TypeScript Types
| Plugin | Output |
|---|---|
| typescript | Type defs from schema |
| typescript-operations | Per-document types |
| typescript-resolvers | Resolver function signatures |
| client-preset | typed-document-node + fragment masking |
3. Using Apollo CLI
| Tool | Detail |
|---|---|
| Rover | Modern Apollo CLI (replaces apollo CLI) |
| rover graph publish | Push schema to Studio |
| rover subgraph check | Validate against operation traffic |
| rover supergraph compose | Compose locally |
4. Using GraphQL Inspector
| Command | Detail |
|---|---|
| diff | Schema breaking-change report |
| validate | Operations against schema |
| coverage | Schema field coverage by ops |
| similar | Find duplicate types |
5. Using GraphQL ESLint
Example: ESLint config
{
overrides: [{
files: ["*.graphql"],
parser: "@graphql-eslint/eslint-plugin",
plugins: ["@graphql-eslint"],
rules: {
"@graphql-eslint/naming-convention": "error",
"@graphql-eslint/no-deprecated": "warn",
"@graphql-eslint/require-description": "warn"
}
}]
}
6. Generating SDK from Schema
| Tool | Output |
|---|---|
| graphql-request + codegen | Typed SDK class |
| genql | Type-safe query builder |
| gqty / Houdini | Schema-first runtime |
7. Using Relay Compiler
| Step | Detail |
|---|---|
| Install | npm i relay-compiler |
| Run | relay-compiler --watch |
| Output | Generated artifacts in __generated__ |
8. Using GraphQL Config
Example: graphql.config.ts
export default {
schema: "schema.graphql",
documents: "src/**/*.{ts,tsx,graphql}",
extensions: {
codegen: { generates: { "src/gql/": { preset: "client" } } }
}
};
9. Using GraphQL Voyager
| Use | Detail |
|---|---|
| Visualization | Type relationship graph |
| Embed | React component or hosted app |
| Skip relations | Hide root types for clarity |
10. Using GraphQL Editor
| Feature | Detail |
|---|---|
| Visual schema design | Drag-and-drop type building |
| Mock backend | Auto-generated mock server |
| Documentation | Built-in docs view |