Syntic
← All skills
EngineeringFreeCommunityv1.0.0

GraphQL Architect

Use when designing GraphQL schemas, implementing resolvers, federation, or optimizing query performance with DataLoader

About this skill

Use when designing GraphQL schemas, implementing resolvers, federation, or optimizing query performance with DataLoader

SKILL.md

graphql-architect.SKILL.md

Place it in your Syntic skills folder. For Syntic Code, install in your local skills directory, review the contents and run it in a controlled environment first.

SKILL.md
---
name: GraphQL Architect
description: Use when designing GraphQL schemas, implementing resolvers, federation, or optimizing query performance with DataLoader
category: Engineering
version: 1.0.0
tools: []
---

# GraphQL Schema Architecture

Design schemas precisely from the client perspective, treating them as product contracts. Make fields non-null by default unless explicitly optional. Use Relay-style connections for paginated lists.

## Schema Design Philosophy
- Schema is the API contract. Design from client perspective, not database schema.
- Make fields non-null unless specific reason for absence.
- Use Relay-style connections for all paginated lists.
- Every breaking change requires `@deprecated(reason: "...")` with migration path.

## Schema Patterns
- Name types as domain nouns: `User`, `Order`, `Product` (never `Get` prefix or `Type` suffix).
- Use enums for fixed sets: `OrderStatus { PENDING CONFIRMED SHIPPED DELIVERED }`.
- Use input types for mutations: `CreateUserInput { name: String! email: String! }`.
- Use union types for polymorphic returns: `SearchResult = User | Product | Article`.
- Implement interfaces for shared fields: `Node { id: ID! }` applied to all entities.

## Resolver Architecture
Keep resolvers thin: extract arguments, call service function, return result. Use DataLoader for every relationship field, instantiating per-request to prevent cache leaks across users. Implement field-level resolvers only when computation or separate data source required.

## Federation (Apollo Federation 2.x)
- Each subgraph owns entities. Define `@key(fields: "id")` on entity types.
- Use `__resolveReference` to fetch entities by key fields in each subgraph.
- Keep supergraph router thin (Apollo Router or Cosmo Router).
- Test subgraph schemas independently with `rover subgraph check` before deployment.

## Performance Optimization
- Enforce query depth limits (max 10) and query complexity analysis to prevent abuse.
- Use persisted queries in production; clients send hash, server looks up query.
- Implement `@defer` and `@stream` directives for incremental delivery.
- Cache normalized responses at CDN with `Cache-Control` headers.
- Monitor resolver execution; any exceeding 100ms needs optimization or DataLoader batching.

## Error Handling
- Return errors in `errors` array with structured `extensions`: `{ code: "FORBIDDEN", field: "email" }`.
- Use union-based errors for mutations: `CreateUserResult = User | ValidationError | ConflictError`.
- Never expose stack traces or internal details in production.
- Log all resolver errors with correlation IDs for traceability.

## Code Generation
Use `graphql-codegen` to generate TypeScript types from schema. Generate client-side hooks with `@graphql-codegen/typescript-react-query` or `@graphql-codegen/typed-document-node`. Run codegen in CI to catch schema drift.

## Verification
- Validate schema with `graphql-inspector validate` or `rover subgraph check`.
- Run `graphql-codegen` to verify type generation succeeds.
- Test all resolvers with integration tests using test server instance.
- Inspect DataLoader batch sizes to verify no N+1 queries exist.

Install

Syntic App

  1. 1Create a dedicated folder for this skill in your local skills library.
  2. 2Place SKILL.md into that folder.
  3. 3Restart Syntic and invoke this skill on matching tasks.

Syntic Code (CLI)

  1. 1Save SKILL.md in your local Syntic Code skills directory.
  2. 2Keep related files in the same skill folder.
  3. 3Run in a safe environment and validate outputs.