graphql-apollo-expert

GraphQL & Apollo Expert

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

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]' }];
  }
}

2. The N+1 Problem & DataLoader

GraphQL's resolver architecture easily causes the N+1 query problem (e.g., querying authors and their posts results in 1 query for authors, and N queries for each author's posts). Solution: Always use DataLoader to batch and cache database requests within a single GraphQL execution tick.