Apollo GraphQL Patterns

2. Schema design

# schema.graphql
type Query {
  user(id: ID!): User
  users(first: Int = 10, after: String): UserConnection!
  search(query: String!, type: SearchType): SearchResult!
}

type Mutation {
  createUser(input: CreateUserInput!): CreateUserPayload!
  updateUser(input: UpdateUserInput!): UpdateUserPayload!
}

type Subscription {
  userOnline(roomId: ID!): User!
}

# Relay-style cursor pagination
type UserConnection {
  edges: [UserEdge!]!
  pageInfo: PageInfo!
  totalCount: Int!
}

type UserEdge {
  node: User!
  cursor: String!
}

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

# Errors as data (union)
union CreateUserPayload = CreateUserSuccess | UserError

type CreateUserSuccess {
  user: User!
}

type UserError {
  message: String!
  field: String
  code: ErrorCode!
}

enum ErrorCode {
  INVALID_INPUT
  DUPLICATE
  NOT_FOUND
  UNAUTHORIZED
}

3. DataLoader (avoid N+1)

import DataLoader from 'dataloader'

export function createDataLoaders() {
  return {
    userById: new DataLoader<string, User>(async (ids) => {
      const users = await db.user.findMany({ where: { id: { in: [...ids] } } })
      const map = new Map(users.map(u => [u.id, u]))
      return ids.map(id => map.get(id) || new Error(`User ${id} not found`))
    }),
  }
}

// In resolver
const resolvers = {
  Post: {
    author: (post, _, { loaders }) => loaders.userById.load(post.authorId),
  },
}

Sans DataLoader, requêter 100 posts → 100 SELECT auteur. Avec DataLoader → 1 SELECT batched.

4. Apollo Client (React)

import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client'

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          users: {
            // Pagination merge
            keyArgs: false,
            merge(existing, incoming) {
              return {
                ...incoming,
                edges: [...(existing?.edges ?? []), ...incoming.edges],
              }
            },
          },
        },
      },
    },
  }),
  headers: {
    authorization: `Bearer ${token}`,
  },
})

function App() {
  return (
    <ApolloProvider client={client}>
      <UsersList />
    </ApolloProvider>
  )
}

const GET_USERS = gql`
  query GetUsers($first: Int!, $after: String) {
    users(first: $first, after: $after) {
      edges {
        node { id name email }
      }
      pageInfo { hasNextPage endCursor }
    }
  }
`

function UsersList() {
  const { data, loading, fetchMore } = useQuery(GET_USERS, { variables: { first: 20 } })
  // ...
}

5. Federation v2 (microservices)

# Subgraph: users
extend schema @link(url: "https://specs.apollo.dev/federation/v2.5", import: ["@key", "@shareable"])

type User @key(fields: "id") {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

# Subgraph: posts
extend schema @link(url: "https://specs.apollo.dev/federation/v2.5", import: ["@key"])

type Post @key(fields: "id") {
  id: ID!
  title: String!
  content: String!
  author: User!
}

type User @key(fields: "id") {
  id: ID! @external
  posts: [Post!]!
}

# Compose supergraph
rover supergraph compose --config supergraph.yaml > supergraph.graphql

# Run Apollo Router (Rust)
./router --supergraph supergraph.graphql

6. Security

import { ApolloServerPluginLandingPageDisabled } from '@apollo/server/plugin/disabled'
import depthLimit from 'graphql-depth-limit'
import { createComplexityRule } from 'graphql-validation-complexity'

const server = new ApolloServer({
  typeDefs,
  resolvers,
  validationRules: [
    depthLimit(7),  // max query depth
    createComplexityRule({ maximumComplexity: 1000 }),
  ],
  plugins: [
    process.env.NODE_ENV === 'production'
      ? ApolloServerPluginLandingPageDisabled()
      : ApolloServerPluginLandingPageGraphQLPlayground(),
  ],
  csrfPrevention: true,  // require Apollo-Require-Preflight header
})

Persisted queries : ne permettre que les queries pré-approuvées en prod (anti-DDoS).

# Generate persisted query manifest
npx generate-persisted-query-manifest

7. Codegen

# codegen.yml