GraphQL with MongoDB and ExpressJS

Pic Courtesy: Multidots

GraphQL, or Graph Query Language, is a query language for your API. It gives you the power to :

Ask for what data you need, and you get exactly that
- Get many resources in a single request
- Add new fields and evolve your API without versions.

References: GraphQL

You can look at the official documentation to learn more about GraphQL features.

Now, let’s talk about the implementation. We will be creating an express-graphql server with MongoDB to persist the data.

Let’s get started,

• Create a package.json by running,

npm init

• Install dev dependencies,

npm i --save-dev babel-cli babel-preset-env babel-preset-stage-0 @types/node

• Install project dependencies,

npm i --save apollo-server-express express graphql mongodb mongoose nodemon

apollo-server-express: This is the Express and Connect integration of GraphQL Server. Apollo Server is a community-maintained open-source GraphQL server that works with many Node.js HTTP server frameworks.

express: NodeJS web application framework.

graphql: The JavaScript reference implementation for GraphQL.

mongodb: The official MongoDB driver for Node.js.

mongoose: Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.

nodemon: nodemon is a tool that helps develop node. js-based applications by automatically restarting the node application when file changes in the directory are detected.

After installing all the dependencies, your package.json should look like this,

• Now, if package.json is ready, create a .babelrc configuration file under the root folder with presets,

• For graphql support, add a graphql.config.js file, under the root folder with content, this will add support and highlights graphql syntax.

Now, let’s add a config file for the application and the MongoDB connection string. We can see the below file in this we have defined server port and the DB connection string.

Now, we will define different schemas for MongoDB using the mongoose tool. In analogous to Relational DB, the schema contains the structure of the various tables we will be creating in our DB.

We will be creating two schemas for this demo.

1. FriendsSchema (Info about his/her friends)
2. SeriesSchema (TV series schema).

Compile the .ts file before running the application to transpile them to the .js file.

As we have defined various DB schemas, now we can initialize our MongoDB connection.

This file configures the MongoDB connection, with required environment variables, connection string, and schemas registered to the DB.

Till now, we have initialized our application, installed dependencies, added DB support. Now we will move to the main task of configuring the GraphQL instance.

1. We will first define the graphql schema, using the graphql-query-language(gql) tool from apollo-server-express. The graphQL server uses a schema to describe the shape of your data graph. This schema defines a hierarchy of types with fields that are populated from your back-end data stores. The schema also specifies exactly which queries and mutations are available for clients to execute against your data graph.

Here, we have defined different types along with Query and Mutation entry points.

2. Now, we will define the GraphQL resolvers. The server needs to know how to populate data for every field in your schema so that it can respond to requests for that data. To accomplish this, it uses resolvers.

A resolver is a function responsible for populating the data for a single field in your schema. It can populate that data in any way you define, such as fetching data from a back-end database or a third-party API.

Here, we can see different types of resolvers for QueryType and Mutation Types. These are the same functions, types defined in the schema.graphql file.

If we have followed up till now with all the configurations, we are successful in initializing, setting up our MongoDB, GraphQL Apollo Server.

Now the last piece of our puzzle remaining is the express-server to be initialized. This server will be the entry point of our whole server.

With this, we have completed our setup task with all the configurations. Now, it’s time to run the server.

Try to install the dependencies, if not, by running the below command.

npm install
OR
yarn

Now run the server by running

npm start

You will see the server will start running on http://localhost:8080/graphql. It will open a GraphQL playground. (Apollo Server hosts GraphQL Playground automatically when you run it in a non-production environment). Learn more about this GraphQL playground.

GraphQL Apollo Server Playground

With this, we conclude this article. You can check out the complete codebase in the below Github Repository.

Do star the repository to get future updates over GraphQL.

Also, give a clap if you like this article, and this helped you in your GraphQL server setup. 😊

akrsh24/GraphQL-Medium

Introduction to Apollo Server