Building a GraphQL API with Node.js and Express.js

1. Introduction

In this tutorial, our main goal is to understand how to build a GraphQL API using Node.js and Express.js. We'll walk through the process of setting up a server, defining a schema, and creating resolvers to get your API up and running.

By the end of this tutorial, you will learn:
- How to set up an Express.js server
- How to define a GraphQL schema
- How to create resolvers for your GraphQL API

Prerequisites:
- Basic knowledge of JavaScript
- Node.js and npm installed on your computer
- Familiarity with Express.js is helpful but not required

2. Step-by-Step Guide

Setting up the Project

First, create a new directory for your project and initialize it with npm:

mkdir graphql-api
cd graphql-api
npm init -y

Next, install the necessary dependencies:

npm install express graphql express-graphql

Creating a Simple Express Server

Create a new file named server.js, and set up a simple Express server:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Setting up GraphQL Middleware

We'll use express-graphql as middleware for our Express server. This package allows Express to understand GraphQL and provides a simple way to create an API server.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const app = express();

app.use('/graphql', graphqlHTTP({
  schema: MyGraphQLSchema, // We'll define this later
  graphiql: true,
}));

app.listen(3000);

3. Code Examples

Defining a GraphQL Schema

A GraphQL schema defines your data's type and the shape of your data graph. It defines various types and their fields and also the relations between these types.

Create a new file named schema.js:

const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

module.exports = schema;

Creating Resolvers

Resolvers provide the instructions for turning a GraphQL operation into data. They resolve the query to actual data.

const root = {
  hello: () => {
    return 'Hello world!';
  },
};

Bringing It All Together

Let's bring everything together in our server.js:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema');
const root = require('./resolvers');

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

4. Summary

In this tutorial, we've learned how to set up an Express.js server, define a GraphQL schema, and create resolvers for our GraphQL API. The next steps for learning would be to explore more complex schema definitions and learn how to handle more advanced types such as Lists and Non-Null fields.

5. Practice Exercises

1. Add a new Query field goodbye that returns the string "Goodbye world!".
2. Add a new Mutation type that allows changing the value of the hello field.
3. Add a new User type with fields id, name, and email. Then add a Query field user that returns a User.

Remember, practice is key to mastering any concept. Keep experimenting with different types of schemas and resolvers, and try to build your own GraphQL API from scratch.