How to Use Apollo Server with Express for GraphQL APIs

To use Apollo Server with Express, install apollo-server-express and express, then create an Express app and apply Apollo Server as middleware using server.applyMiddleware({ app }). This setup allows you to serve GraphQL requests on an Express route, typically /graphql.

Syntax

Here is the basic syntax to integrate Apollo Server with Express:

• import necessary modules.
• Create an Express app.
• Define your GraphQL typeDefs and resolvers.
• Create an ApolloServer instance with those schemas.
• Use await server.start() to initialize the server.
• Apply Apollo Server as middleware to the Express app with server.applyMiddleware({ app }).
• Start the Express app with app.listen().

javascript

import express from 'express';
import { ApolloServer } from 'apollo-server-express';

const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!'
  }
};

async function startServer() {
  const app = express();
  const server = new ApolloServer({ typeDefs, resolvers });
  await server.start();
  server.applyMiddleware({ app });

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

startServer();

Output

🚀 Server ready at http://localhost:4000/graphql

Example

This example shows a complete Apollo Server setup with Express that responds to a simple hello query returning a string.

It demonstrates how to start the server and access the GraphQL playground at /graphql.

javascript

import express from 'express';
import { ApolloServer } from 'apollo-server-express';

const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!'
  }
};

async function startServer() {
  const app = express();
  const server = new ApolloServer({ typeDefs, resolvers });
  await server.start();
  server.applyMiddleware({ app });

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

startServer();

Output

🚀 Server ready at http://localhost:4000/graphql

Common Pitfalls

Common mistakes when using Apollo Server with Express include:

• Not calling await server.start() before applying middleware, which causes errors.
• Forgetting to call server.applyMiddleware({ app }), so GraphQL endpoint is not registered.
• Not importing express or apollo-server-express correctly.
• Trying to use Apollo Server without an async start function in recent versions.

Always ensure your server is started before applying middleware and that your Express app listens on a port.

javascript

/* Wrong way: Missing await server.start() */
import express from 'express';
import { ApolloServer } from 'apollo-server-express';

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

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

// Missing await server.start()
server.applyMiddleware({ app });

app.listen(4000, () => {
  console.log('Server running');
});

/* Right way: */
async function start() {
  const app = express();
  const server = new ApolloServer({ typeDefs, resolvers });
  await server.start();
  server.applyMiddleware({ app });
  app.listen(4000, () => console.log('Server running'));
}
start();

Quick Reference

Key points to remember when using Apollo Server with Express:

• Install apollo-server-express and express packages.
• Define your GraphQL schema with typeDefs and resolvers.
• Use await server.start() before applying middleware.
• Apply Apollo Server middleware to Express app with server.applyMiddleware({ app }).
• Start Express server with app.listen().

Key Takeaways

Always call await server.start() before applying Apollo Server middleware to Express.

Use server.applyMiddleware({ app }) to connect Apollo Server with your Express app.

Define your GraphQL schema using typeDefs and resolvers before creating ApolloServer.

Start your Express app with app.listen() to serve the GraphQL endpoint.

Check the console log for the GraphQL endpoint URL, usually /graphql.