Apollo Server is a popular open-source GraphQL server that can be integrated with a Node.js application using the Express web framework. In this tutorial, you will learn how to set up and use Apollo Server to build a GraphQL API with Node.js and Express.
Before you begin, you will need to have the following installed on your development machine:
Node.js npm (which is bundled with Node.js) You will also need a basic understanding of GraphQL and how to build a Node.js application with Express.
Step 1: Create a new Node.js project
To get started, create a new Node.js project by running the following command in your terminal:
$ mkdir my-project
$ cd my-project
$ npm init -y
This will create a new directory called my-project and initialize a new Node.js project with default settings.
Step 2: Install the required dependencies
Next, you will need to install the required dependencies for your project. Run the following command to install the required packages:
$ npm install @apollo/server express graphql graphql-tag
This will install the following packages:
Step 3: Define your GraphQL schema
Now that you have the required dependencies installed, you can define your GraphQL schema. A GraphQL schema defines the types and operations that are available in your API.
Create a new file called schema.ts and add the following code:
import { gql } from 'graphql-tag';
export const typeDefs = gql`
type Query {
hello: String!
}
`;
This defines a simple GraphQL API with a single query called hello. This query returns a string and is marked as non-nullable (!) because it always returns a value.
Step 4: Define your GraphQL resolvers
Next, you will need to define your GraphQL resolvers. A resolver is a function that maps to a GraphQL operation and is responsible for fetching the data for that operation.
Create a new file called resolvers.ts and add the following code:
export const resolvers = {
Query: {
hello: () => 'Hello, world!',
},
};
This defines a single resolver for the hello query that always returns the string 'Hello, world!'.
Step 5: Set up Apollo Server
Now that you have your schema and resolvers defined, you can set up Apollo Server.
Create a new file called index.ts and add the following code:
import express from 'express';
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
import { typeDefs } from './schema';
import { resolvers } from './resolver';
const server = new ApolloServer({ typeDefs, resolvers });
To start your Node.js server with Apollo Server and Express, you will need to add the following code to the bottom of your index.ts file:
const app = express();
(async () => {
await server.start();
app.use(expressMiddleware(server));
app.listen({ port: 4000 }, () =>
console.log(`🚀 Server ready at http://localhost:4000/graphql`);
);
})();
This sets up an Express app and applies the Apollo Server middleware to it. It then starts the server on port 4000 and logs a message to the console when the server is ready.
To start the server, run the following command in your terminal:
$ yarn dev
You should see the following message in your terminal:
🚀 Server ready at http://localhost:4000/graphql
You can now open your browser and navigate to http://localhost:4000/graphql to access the GraphQL Playground, which is a tool for testing and interacting with your GraphQL API.
In the GraphQL Playground, you can run the following query to test your API:
query {
hello
}
You should see the following response:
{
"data": {
"hello": "Hello, world!"
}
}
Congratulations! You have successfully set up and run a GraphQL API with Apollo Server and Node.js using Express.
In this tutorial, you learned how to set up and use Apollo Server to build a GraphQL API with Node.js and Express. You defined your GraphQL schema and resolvers and set up Apollo Server to handle GraphQL requests.
This is just the beginning of what you can do with Apollo Server. To learn more about building GraphQL APIs with Apollo Server, check out the official documentation.
I create a project with the sample GraphQL server. You can access it here: https://github.com/enniob/GraphQLTutorial