Creating Apollo GraphQL Server with expressMiddleware

This example demonstrates how to create an Apollo Server instance and connect it to an Express app.

Folder Acrchitecture

The folder structure for this project should look like this:

index.ts

index.ts

The src folder contains the source code for the project.
The app folder inside the src folder contains the code for the Apollo Server instance.
The index.ts file inside the src folder is the entry point of the application.

This project is created via CRA (Create React App) and the src folder is the root of the project.

Setting Up the Project

Follow these steps to set up the project and create an Apollo Server with expressMiddleware ✨

Install Dependencies

First, create a new project folder and navigate to it in your terminal. If you are confused see the folder structure above. Then, run the following command to install the required dependencies:

npm install apollo-server-express express graphql

Creating Apollo Server

app/index.ts

import express from "express";
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import BodyParser from "body-parser";
 
export async function initServer() {
  const app = express(); // create an express app
  app.use(BodyParser.json()); // use the body parser middleware
  const graphqlServer = new ApolloServer({
    // create an ApolloServer instance
    typeDefs: `
      type Query {
        greet: String
      }
 
    `, // define your schema here
    // What are typeDefs? https://www.apollographql.com/docs/apollo-server/schema/schema/
    resolvers: {
      Query: {
        greet: () => "Hello user!",
      },
    }, // define your resolvers here.
    // What are resolvers? https://www.apollographql.com/docs/apollo-server/data/resolvers/
  });
 
  await graphqlServer.start(); // starts the server
  app.use("/graphql", expressMiddleware(graphqlServer)); // use the express middleware to connect the ApolloServer
  return app; // return the app instance to be used by the caller of this function (in this case, the index.ts file)
}

Code Explanation

Details

We first import the necessary packages:

express to create an express app
ApolloServer from @apollo/server to create an Apollo Server instance
expressMiddleware from @apollo/server/express4 to connect the Apollo Server instance to the express app
BodyParser to parse the incoming request body

We define an initServer function that creates an express app, uses the body parser middleware, and creates an Apollo Server instance.
We define the schema for the Apollo Server instance using the typeDefs property. In this example, we define a simple schema with a greet query that returns a string.
We define the resolvers for the schema using the resolvers property. In this example, we define a resolver for the greet query that returns the string "Hello user!".
We start the Apollo Server instance using the start method.
We use the expressMiddleware function to connect the Apollo Server instance to the express app. This allows the express app to handle GraphQL requests.
Finally, we return the express app instance to be used by the caller of the initServer function.

Running the Apollo Server

src/index.ts

import { initServer } from "./app/index";
 
async function init() {
  const app = await initServer();
  app.listen(8000, () => {
    console.log("Server is running on http://localhost:8000");
  });
}
 
init();

Code Explanation

Details

We import the initServer function from the app/index file.
We define an init function that calls the initServer function to create an express app.
We use the app.listen method to start the express app on port 8000.
When the server is running, we log a message to the console.
We call the init function to start the server.

This will start the server and log a message to the console indicating that the server is running on http://localhost:8000.

Viewing the GraphQL Playground

To view the GraphQL Playground, open your browser and navigate to http://localhost:8000/graphql. You should see the Apollo Server Playground where you can interact with the GraphQL API.

ApolloServer Playground

This only opens on development mode and not in production.

JWT & Bcrypt Introduction