GraphQL API Design Patterns - Building Scalable and Efficient APIs

Muhammad Ubaid Raza
March 8, 2024

GraphQL API Design Patterns: Building Scalable and Efficient APIs

GraphQL has revolutionized how we think about API design, offering unprecedented flexibility and efficiency. After building and scaling GraphQL APIs serving millions of requests, I'm sharing the patterns, optimizations, and best practices that ensure your GraphQL implementation is both powerful and performant.

Schema Design Fundamentals

Type-First Design Approach

# schema.graphql - Start with clear, well-defined types
type User {
  id: ID!
  email: String!
  profile: UserProfile
  posts(first: Int, after: String): PostConnection!
  followers(first: Int, after: String): UserConnection!
  following(first: Int, after: String): UserConnection!
  createdAt: DateTime!
  updatedAt: DateTime!
}

type UserProfile {
  firstName: String!
  lastName: String!
  bio: String
  avatar: Image
  website: URL
  location: String
  birthDate: Date
}

type Post {
  id: ID!
  title: String!
  content: String!
  excerpt: String
  author: User!
  tags: [Tag!]!
  comments(first: Int, after: String): CommentConnection!
  likes: Int!
  isLiked: Boolean!
  publishedAt: DateTime
  createdAt: DateTime!
  updatedAt: DateTime!
}

# Relay-style connections for pagination
type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
  totalCount: Int!
}

type PostEdge {
  node: Post!
  cursor: String!
}

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

Interface and Union Patterns

# Interfaces for shared behavior
interface Node {
  id: ID!
}

interface Timestamped {
  createdAt: DateTime!
  updatedAt: DateTime!
}

interface Authored {
  author: User!
}

# Implement interfaces
type Post implements Node & Timestamped & Authored {
  id: ID!
  title: String!
  content: String!
  author: User!
  createdAt: DateTime!
  updatedAt: DateTime!
}

type Comment implements Node & Timestamped & Authored {
  id: ID!
  content: String!
  post: Post!
  author: User!
  createdAt: DateTime!
  updatedAt: DateTime!
}

# Union types for polymorphic results
union SearchResult = Post | User | Tag

type Query {
  search(query: String!, type: SearchType): [SearchResult!]!
  node(id: ID!): Node
}

enum SearchType {
  ALL
  POSTS
  USERS
  TAGS
}

Advanced Resolver Patterns

DataLoader for N+1 Problem Resolution

// dataloaders/userLoader.js
const DataLoader = require("dataloader")
const { User } = require("../models")

const createUserLoader = () => {
  return new DataLoader(async (userIds) => {
    const users = await User.findByIds(userIds)

    // Return users in the same order as requested IDs
    const userMap = new Map(users.map((user) => [user.id, user]))
    return userIds.map((id) => userMap.get(id) || null)
  })
}

// dataloaders/postLoader.js
const createPostsByUserLoader = () => {
  return new DataLoader(async (userIds) => {
    const posts = await Post.findByUserIds(userIds)

    // Group posts by user ID
    const postsByUser = userIds.map((userId) =>
      posts.filter((post) => post.authorId === userId),
    )

    return postsByUser
  })
}

// Context setup
const createContext = ({ req }) => ({
  user: req.user,
  dataloaders: {
    userLoader: createUserLoader(),
    postsByUserLoader: createPostsByUserLoader(),
    commentsByPostLoader: createCommentsByPostLoader(),
  },
})

Resolver Implementation with DataLoaders

// resolvers/user.js
const userResolvers = {
  Query: {
    user: async (parent, { id }, { dataloaders }) => {
      return dataloaders.userLoader.load(id)
    },

    users: async (parent, { first, after }, { dataloaders }) => {
      const result = await User.findMany({ first, after })

      // Prime the loader cache
      result.edges.forEach((edge) => {
        dataloaders.userLoader.prime(edge.node.id, edge.node)
      })

      return result
    },
  },

  User: {
    posts: async (user, { first, after }, { dataloaders }) => {
      return dataloaders.postsByUserLoader.load(user.id)
    },

    followers: async (user, args, { dataloaders }) => {
      const followerIds = await dataloaders.followerIdsByUserLoader.load(
        user.id,
      )
      const followers = await dataloaders.userLoader.loadMany(followerIds)

      return {
        edges: followers.map((follower) => ({
          node: follower,
          cursor: Buffer.from(follower.id).toString("base64"),
        })),
        pageInfo: {
          hasNextPage: false, // Implement proper pagination logic
          hasPreviousPage: false,
        },
        totalCount: followers.length,
      }
    },
  },

  Post: {
    author: async (post, args, { dataloaders }) => {
      return dataloaders.userLoader.load(post.authorId)
    },

    comments: async (post, { first, after }, { dataloaders }) => {
      return dataloaders.commentsByPostLoader.load(post.id)
    },

    isLiked: async (post, args, { user, dataloaders }) => {
      if (!user) return false
      return dataloaders.isLikedLoader.load({
        postId: post.id,
        userId: user.id,
      })
    },
  },
}

Field-Level Authorization

// directives/auth.js
const { SchemaDirectiveVisitor } = require("apollo-server-express")
const { defaultFieldResolver } = require("graphql")

class AuthDirective extends SchemaDirectiveVisitor {
  visitFieldDefinition(field) {
    const { resolve = defaultFieldResolver } = field
    const requiredRole = this.args.requires

    field.resolve = async function (parent, args, context, info) {
      const { user } = context

      if (!user) {
        throw new AuthenticationError("You must be logged in")
      }

      if (requiredRole && !user.roles.includes(requiredRole)) {
        throw new ForbiddenError(`You need ${requiredRole} role`)
      }

      return resolve.call(this, parent, args, context, info)
    }
  }
}

// Schema with directives
const typeDefs = `
  directive @auth(requires: Role = USER) on FIELD_DEFINITION
  
  enum Role {
    USER
    ADMIN
    MODERATOR
  }
  
  type User {
    id: ID!
    email: String! @auth
    profile: UserProfile!
    adminNotes: String @auth(requires: ADMIN)
  }
  
  type Mutation {
    deleteUser(id: ID!): Boolean! @auth(requires: ADMIN)
    updateProfile(input: UpdateProfileInput!): User! @auth
  }
`

Performance Optimization Strategies

Query Complexity Analysis

// complexity/rules.js
const depthLimit = require("graphql-depth-limit")
const costAnalysis = require("graphql-cost-analysis")

const complexityLimitRule = costAnalysis({
  maximumCost: 1000,
  defaultCost: 1,
  scalarCost: 1,
  objectCost: 2,
  listFactor: 10,
  introspectionCost: 1000,
  fieldExtensions: {
    complexity: {
      // Custom complexity for expensive fields
      User: {
        posts: { complexity: ({ args }) => args.first * 2 },
        followers: { complexity: ({ args }) => args.first * 3 },
      },
      Post: {
        comments: { complexity: ({ args }) => args.first * 2 },
      },
    },
  },
})

// Apollo Server setup
const server = new ApolloServer({
  typeDefs,
  resolvers,
  validationRules: [
    depthLimit(10), // Limit query depth
    complexityLimitRule,
  ],
  plugins: [
    {
      requestDidStart() {
        return {
          didResolveOperation({ request, document }) {
            const complexity = getComplexity({
              estimators: [
                fieldExtensionsEstimator(),
                simpleEstimator({ defaultComplexity: 1 }),
              ],
              schema,
              query: document,
              variables: request.variables,
            })

            if (complexity > 1000) {
              throw new Error(
                `Query complexity ${complexity} exceeds limit of 1000`,
              )
            }
          },
        }
      },
    },
  ],
})

Query Caching and Persisted Queries

// cache/redis.js
const Redis = require("ioredis")
const redis = new Redis(process.env.REDIS_URL)

class QueryCache {
  constructor() {
    this.redis = redis
    this.defaultTTL = 300 // 5 minutes
  }

  generateKey(query, variables, user) {
    const hash = crypto
      .createHash("sha256")
      .update(JSON.stringify({ query, variables, userId: user?.id }))
      .digest("hex")
    return `gql:${hash}`
  }

  async get(query, variables, user) {
    const key = this.generateKey(query, variables, user)
    const cached = await this.redis.get(key)
    return cached ? JSON.parse(cached) : null
  }

  async set(query, variables, user, result, ttl = this.defaultTTL) {
    const key = this.generateKey(query, variables, user)
    await this.redis.setex(key, ttl, JSON.stringify(result))
  }

  async invalidatePattern(pattern) {
    const keys = await this.redis.keys(pattern)
    if (keys.length > 0) {
      await this.redis.del(...keys)
    }
  }
}

// Caching plugin
const cachePlugin = {
  requestDidStart() {
    return {
      async willSendResponse({ request, response, context }) {
        const { query, variables } = request
        const { user } = context

        // Only cache successful queries
        if (response.errors) return

        // Don't cache mutations
        if (query.includes("mutation")) return

        await queryCache.set(query, variables, user, response.data)
      },
    }
  },
}

Subscription Optimization

// subscriptions/setup.js
const { RedisPubSub } = require("graphql-redis-subscriptions")
const { withFilter } = require("graphql-subscriptions")

const pubsub = new RedisPubSub({
  connection: {
    host: process.env.REDIS_HOST,
    port: process.env.REDIS_PORT,
    retryDelayOnFailover: 100,
    enableReadyCheck: false,
    maxRetriesPerRequest: null,
  },
})

// Subscription resolvers
const subscriptionResolvers = {
  Subscription: {
    postAdded: {
      subscribe: withFilter(
        () => pubsub.asyncIterator(["POST_ADDED"]),
        (payload, variables, context) => {
          // Filter subscriptions based on user permissions
          const { user } = context
          const { post } = payload.postAdded

          // Only send public posts or posts from followed users
          return (
            post.isPublic || (user && user.following.includes(post.authorId))
          )
        },
      ),
    },

    commentAdded: {
      subscribe: withFilter(
        () => pubsub.asyncIterator(["COMMENT_ADDED"]),
        (payload, variables) => {
          return payload.commentAdded.postId === variables.postId
        },
      ),
    },

    userOnline: {
      subscribe: withFilter(
        () => pubsub.asyncIterator(["USER_STATUS_CHANGED"]),
        (payload, variables, context) => {
          const { user } = context
          return user && user.following.includes(payload.userOnline.id)
        },
      ),
    },
  },
}

// Publishing events
const publishPostAdded = async (post) => {
  await pubsub.publish("POST_ADDED", { postAdded: post })
}

const publishCommentAdded = async (comment) => {
  await pubsub.publish("COMMENT_ADDED", { commentAdded: comment })
}

Security Best Practices

Input Validation and Sanitization

// validation/schemas.js
const Joi = require("joi")

const validationSchemas = {
  createPost: Joi.object({
    title: Joi.string().min(1).max(200).required(),
    content: Joi.string().min(1).max(10000).required(),
    tags: Joi.array().items(Joi.string().max(50)).max(10),
    isPublic: Joi.boolean().default(true),
  }),

  updateUser: Joi.object({
    firstName: Joi.string().min(1).max(50),
    lastName: Joi.string().min(1).max(50),
    bio: Joi.string().max(500),
    website: Joi.string().uri(),
  }),

  searchQuery: Joi.object({
    query: Joi.string().min(1).max(100).required(),
    type: Joi.string().valid("ALL", "POSTS", "USERS", "TAGS").default("ALL"),
    first: Joi.number().integer().min(1).max(50).default(10),
  }),
}

// Validation middleware
const validateInput =
  (schema) => (resolve) => async (parent, args, context, info) => {
    const { error, value } = schema.validate(args.input || args)

    if (error) {
      throw new UserInputError("Invalid input", {
        validationErrors: error.details.map((detail) => ({
          field: detail.path.join("."),
          message: detail.message,
        })),
      })
    }

    // Replace args with validated values
    const newArgs = { ...args, ...(args.input ? { input: value } : value) }
    return resolve(parent, newArgs, context, info)
  }

// Usage in resolvers
const mutationResolvers = {
  Mutation: {
    createPost: validateInput(validationSchemas.createPost)(
      async (parent, { input }, { user, dataloaders }) => {
        if (!user) throw new AuthenticationError("Must be logged in")

        const post = await Post.create({
          ...input,
          authorId: user.id,
        })

        await publishPostAdded(post)
        return post
      },
    ),
  },
}

Rate Limiting

// middleware/rateLimiting.js
const { RateLimiterRedis } = require("rate-limiter-flexible")
const Redis = require("ioredis")

const redis = new Redis(process.env.REDIS_URL)

// Different limits for different operations
const rateLimiters = {
  query: new RateLimiterRedis({
    storeClient: redis,
    keyPrefix: "rl_query",
    points: 100, // Number of requests
    duration: 60, // Per 60 seconds
  }),

  mutation: new RateLimiterRedis({
    storeClient: redis,
    keyPrefix: "rl_mutation",
    points: 10, // Number of mutations
    duration: 60, // Per 60 seconds
  }),

  subscription: new RateLimiterRedis({
    storeClient: redis,
    keyPrefix: "rl_subscription",
    points: 5, // Number of subscriptions
    duration: 60, // Per 60 seconds
  }),
}

const rateLimitPlugin = {
  requestDidStart() {
    return {
      async didResolveOperation({ request, context }) {
        const { user } = context
        const userId = user?.id || request.ip

        const operationType = request.operationName?.toLowerCase() || "query"
        const limiter = rateLimiters[operationType] || rateLimiters.query

        try {
          await limiter.consume(userId)
        } catch (rejRes) {
          throw new Error(
            `Rate limit exceeded. Try again in ${rejRes.msBeforeNext}ms`,
          )
        }
      },
    }
  },
}

Query Whitelisting for Production

// security/queryWhitelist.js
const approvedQueries = new Map([
  [
    "GetUser",
    `
    query GetUser($id: ID!) {
      user(id: $id) {
        id
        profile {
          firstName
          lastName
          avatar
        }
      }
    }
  `,
  ],
  [
    "GetPosts",
    `
    query GetPosts($first: Int, $after: String) {
      posts(first: $first, after: $after) {
        edges {
          node {
            id
            title
            excerpt
            author {
              id
              profile {
                firstName
                lastName
              }
            }
          }
        }
        pageInfo {
          hasNextPage
          endCursor
        }
      }
    }
  `,
  ],
])

const queryWhitelistPlugin = {
  requestDidStart() {
    return {
      async didResolveOperation({ request }) {
        if (process.env.NODE_ENV === "production") {
          const { operationName, query } = request

          if (!operationName) {
            throw new Error("Operation name is required in production")
          }

          const approvedQuery = approvedQueries.get(operationName)
          if (!approvedQuery) {
            throw new Error(`Query ${operationName} is not approved`)
          }

          // Optionally validate that the query matches exactly
          const normalizedQuery = query.replace(/\s+/g, " ").trim()
          const normalizedApproved = approvedQuery.replace(/\s+/g, " ").trim()

          if (normalizedQuery !== normalizedApproved) {
            throw new Error("Query does not match approved version")
          }
        }
      },
    }
  },
}

Testing Strategies

Unit Testing Resolvers

// tests/resolvers/user.test.js
const { createTestClient } = require("apollo-server-testing")
const { ApolloServer } = require("apollo-server-express")
const { typeDefs, resolvers } = require("../../src/schema")

describe("User Resolvers", () => {
  let server, query, mutate

  beforeEach(() => {
    server = new ApolloServer({
      typeDefs,
      resolvers,
      context: () => ({
        user: { id: "1", email: "test@example.com" },
        dataloaders: {
          userLoader: {
            load: jest.fn().mockResolvedValue({
              id: "1",
              email: "test@example.com",
              profile: { firstName: "John", lastName: "Doe" },
            }),
          },
        },
      }),
    })

    const testClient = createTestClient(server)
    query = testClient.query
    mutate = testClient.mutate
  })

  it("should fetch user by ID", async () => {
    const GET_USER = `
      query GetUser($id: ID!) {
        user(id: $id) {
          id
          email
          profile {
            firstName
            lastName
          }
        }
      }
    `

    const result = await query({
      query: GET_USER,
      variables: { id: "1" },
    })

    expect(result.errors).toBeUndefined()
    expect(result.data.user).toEqual({
      id: "1",
      email: "test@example.com",
      profile: {
        firstName: "John",
        lastName: "Doe",
      },
    })
  })

  it("should handle authentication errors", async () => {
    server = new ApolloServer({
      typeDefs,
      resolvers,
      context: () => ({ user: null }), // No authenticated user
    })

    const testClient = createTestClient(server)

    const UPDATE_PROFILE = `
      mutation UpdateProfile($input: UpdateProfileInput!) {
        updateProfile(input: $input) {
          id
          profile {
            firstName
          }
        }
      }
    `

    const result = await testClient.mutate({
      mutation: UPDATE_PROFILE,
      variables: {
        input: { firstName: "Jane" },
      },
    })

    expect(result.errors).toBeDefined()
    expect(result.errors[0].message).toContain("authentication")
  })
})

Integration Testing

// tests/integration/api.test.js
const request = require("supertest")
const { createApp } = require("../../src/app")

describe("GraphQL API Integration", () => {
  let app, authToken

  beforeAll(async () => {
    app = await createApp()

    // Create test user and get auth token
    const loginResponse = await request(app)
      .post("/graphql")
      .send({
        query: `
          mutation Login($email: String!, $password: String!) {
            login(email: $email, password: $password) {
              token
              user {
                id
                email
              }
            }
          }
        `,
        variables: {
          email: "test@example.com",
          password: "password123",
        },
      })

    authToken = loginResponse.body.data.login.token
  })

  it("should create and fetch a post", async () => {
    // Create post
    const createResponse = await request(app)
      .post("/graphql")
      .set("Authorization", `Bearer ${authToken}`)
      .send({
        query: `
          mutation CreatePost($input: CreatePostInput!) {
            createPost(input: $input) {
              id
              title
              content
              author {
                id
              }
            }
          }
        `,
        variables: {
          input: {
            title: "Test Post",
            content: "This is a test post content",
            isPublic: true,
          },
        },
      })

    expect(createResponse.body.errors).toBeUndefined()
    const postId = createResponse.body.data.createPost.id

    // Fetch post
    const fetchResponse = await request(app)
      .post("/graphql")
      .send({
        query: `
          query GetPost($id: ID!) {
            post(id: $id) {
              id
              title
              content
              author {
                profile {
                  firstName
                  lastName
                }
              }
            }
          }
        `,
        variables: { id: postId },
      })

    expect(fetchResponse.body.errors).toBeUndefined()
    expect(fetchResponse.body.data.post.title).toBe("Test Post")
  })
})

Monitoring and Analytics

Performance Monitoring

// monitoring/apollo.js
const { ApolloServerPluginUsageReporting } = require("apollo-server-core")

const performancePlugin = {
  requestDidStart() {
    return {
      willSendResponse({ response, context, request }) {
        const { operationName, query } = request
        const { user } = context

        // Log slow queries
        const duration = Date.now() - context.startTime
        if (duration > 1000) {
          console.warn("Slow GraphQL Query", {
            operationName,
            duration,
            userId: user?.id,
            query: query.substring(0, 200),
          })
        }

        // Track metrics
        metrics.graphqlRequestDuration
          .labels(operationName || "unknown")
          .observe(duration / 1000)

        metrics.graphqlRequestTotal
          .labels(
            operationName || "unknown",
            response.errors ? "error" : "success",
          )
          .inc()
      },
    }
  },
}

// Apollo Studio integration
const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    ApolloServerPluginUsageReporting({
      sendVariableValues: { all: true },
      sendHeaders: { all: true },
    }),
    performancePlugin,
  ],
})

Conclusion

Building scalable GraphQL APIs requires careful attention to:

  1. Schema Design - Well-structured types, interfaces, and connections
  2. Performance - DataLoaders, caching, and query optimization
  3. Security - Authentication, authorization, and input validation
  4. Monitoring - Performance tracking and error reporting
  5. Testing - Comprehensive unit and integration tests

GraphQL's flexibility is both its strength and potential weakness. The patterns and practices outlined here help you harness that flexibility while maintaining performance, security, and maintainability.

Start with a solid schema foundation, implement proper data loading patterns, and gradually add advanced features like subscriptions and caching as your API grows.

What GraphQL challenges are you facing in your projects? Are there specific performance or security concerns you'd like me to address? I'm here to help with any GraphQL questions you might have.

Back to Blog