graphql-apollo-expert

GraphQL & Apollo Expert

English | Bahasa Indonesia

---

English

Orchestration & Integration

• Upstream Specs & Design: api-design-expert, spec-driven-development-expert, brainstorming
• Backend & Resolvers: js-backend-expert, database-orm-expert, sse-websocket-streaming-expert
• Frontend Apollo Consumers: senior-frontend, vue-frontend-expert, tanstack-query-expert
• Security & Quality: rate-limit-abuse-prevention, autonomous-red-teamer, e2e-testing-expert, anti-slop
• Lifecycle & Governance: zero-to-prod-orchestrator, session-memory-manager

Description

Production-grade guidance for building and consuming GraphQL APIs. Focuses on the Apollo ecosystem (Apollo Server, Apollo Client, Federation), NestJS GraphQL integration, and solving common performance pitfalls like the N+1 query problem using DataLoaders.

Trigger Conditions

Activate this skill when the user is:

• Setting up a GraphQL server with NestJS, Express, or Apollo Server.
• Using @apollo/client or @vue/apollo-composable on the frontend.
• Deciding between Code-First vs. Schema-First GraphQL design.
• Optimizing backend database queries triggered by GraphQL resolvers (N+1 problem).
• Implementing GraphQL Subscriptions via WebSockets.

Core Concepts

1. Code-First vs Schema-First (NestJS)

• Code-First (Recommended for TypeScript): Define resolvers and object types using TS decorators. The schema .gql file is automatically generated. Ensures a single source of truth.
• Schema-First: Write raw .gql files and use tools to generate TypeScript interfaces.

// NestJS Code-First Example
import { ObjectType, Field, Int } from '@nestjs/graphql';

@ObjectType()
export class User {
  @Field(() => Int)
  id: number;

  @Field()
  email: string;
}

import { Resolver, Query } from '@nestjs/graphql';

@Resolver(() => User)
export class UserResolver {
  @Query(() => [User])
  async users(): Promise<User[]> {
    return [{ id: 1, email: '[email protected]' }];
  }
}