How to Add Middleware to Apollo Server: Simple Guide

To add middleware in Apollo Server, use the express or koa middleware before applying Apollo Server as middleware on your HTTP server. You can insert custom functions to run code before GraphQL requests reach your resolvers.

Syntax

Middleware in Apollo Server is added by integrating Apollo Server with an HTTP framework like Express. You add middleware functions before the Apollo Server middleware to process requests.

• app.use(middlewareFunction): Adds middleware to Express.
• server.applyMiddleware({ app }): Connects Apollo Server to Express.

javascript

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const app = express();

// Middleware function
app.use((req, res, next) => {
  console.log('Middleware running');
  next();
});

const typeDefs = gql`type Query { hello: String }`;
const resolvers = { Query: { hello: () => 'Hello world!' } };

const server = new ApolloServer({ typeDefs, resolvers });

async function start() {
  await server.start();
  server.applyMiddleware({ app });

  app.listen(4000, () => {
    console.log('Server ready at http://localhost:4000' + server.graphqlPath);
  });
}

start();

Example

This example shows how to add a simple logging middleware to an Apollo Server using Express. The middleware logs each incoming request before it reaches the GraphQL server.

javascript

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const app = express();

// Logging middleware
app.use((req, res, next) => {
  console.log(`Request received: ${req.method} ${req.url}`);
  next();
});

const typeDefs = gql`
  type Query {
    greeting: String
  }
`;

const resolvers = {
  Query: {
    greeting: () => 'Hello from Apollo Server!'
  }
};

const server = new ApolloServer({ typeDefs, resolvers });

async function startServer() {
  await server.start();
  server.applyMiddleware({ app });

  app.listen(4000, () => {
    console.log(`Server running at http://localhost:4000${server.graphqlPath}`);
  });
}

startServer();

Output

Request received: GET /graphql
Server running at http://localhost:4000/graphql

Common Pitfalls

Common mistakes when adding middleware to Apollo Server include:

• Not calling next() in middleware, which blocks requests.
• Adding middleware after server.applyMiddleware(), so it doesn't run before GraphQL.
• Forgetting to await server.start() before applying middleware in Apollo Server v3+.

javascript

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const app = express();

// WRONG: Middleware missing next(), request hangs
app.use((req, res) => {
  console.log('Middleware without next');
  // next() missing here
});

const typeDefs = gql`type Query { hello: String }`;
const resolvers = { Query: { hello: () => 'Hi' } };

const server = new ApolloServer({ typeDefs, resolvers });

async function start() {
  await server.start();
  server.applyMiddleware({ app });
  app.listen(4000);
}
start();

// RIGHT: Middleware calls next()
app.use((req, res, next) => {
  console.log('Middleware with next');
  next();
});

Quick Reference

Tips for adding middleware to Apollo Server:

• Use Express or Koa to add middleware functions.
• Always call next() in middleware to continue request flow.
• Call await server.start() before applyMiddleware in Apollo Server v3+.
• Add middleware before applyMiddleware to affect GraphQL requests.

Key Takeaways

Add middleware by using an HTTP framework like Express before applying Apollo Server middleware.

Always call next() in middleware to avoid blocking requests.

In Apollo Server v3+, await server.start() before applying middleware.

Middleware must be added before server.applyMiddleware() to run on GraphQL requests.

Middleware can be used for logging, authentication, or modifying requests.