GraphQL

Build GraphQL Server using Node.js, Express & MongoDB

The most straightforward way to start with GraphQL & MongoDB.

Founder @ednsquare | Continiously Designing Testing Coding at ednsquare | Any query? shoot an email at ednsquare@gmail.com

Published · Jun 14 2019

  
If you’re reading this article, I assume that you know a little bit about GraphQL. If you don’t know, you can learn more about GraphQL here.
Getting started
First, create a folder, then start our project.
npm init -y 

Then install some dependencies for our project.
npm install @babel/cli @babel/core @babel/preset-env body-parser concurrently cors express express-graphql graphql graphql-tools merge-graphql-schemas mongoose nodemon

And then @babel/node as a dev dependency:
npm install --save-dev @babel/node 

Babel
Now we’re gonna set up Babel for our project. Create a file called .babelrc in your project folder. Then, put the @babel/env there, like this:
Then go to your package.json and add some scripts:
We’ll have only one script that we’re gonna use in our project.
“server” — It will mainly run our server.
Server
Now, in our root folder create the index.js file. It will be where we’re gonna make our server.

First, we’re gonna import all the modules that we’ll use.
Then, we’re gonna create our connect with MongoDB using Mongoose:
Make sure you have installed mondoDB on your machine

Express
Now we’re gonna finally start our server. For that, we’ve put some more lines in our index.js and we’re done. Here is complete index.js file looks like:
Now, run the command 
npm run server 

and go to localhost:4000/graphql you will see something like this:
{"errors":[{"message":"GraphQL middleware options must contain a schema."}]} 

MongoDB and Schema
Now, in our root folder, make a folder named models and create a file inside called User.js (yes, with capital U).

Inside of User.js, we’re gonna create our first schema in MongoDB using Mongoose.
Now that we have created our User schema, we’re gonna start with GraphQL.

GraphQL
In our root folder, we’re gonna create a folder called graphql. Inside that folder, we’re gonna create a file called index.js and two more folders: resolversand types.

Queries
Queries in GraphQL are the way we ask our server for data. We ask for the data that we need, and it returns exactly that data.

All our queries will be inside our types folder. Inside that folder, create an index.js file and a User folder.

Inside the User folder, we’re gonna create an index.js file and write our queries.
In our types folder, in our index.js file, we’re gonna import all the types that we have. For now, we have the User types.
Mutations
Mutations in GraphQL are the way we modify data in the server.

All our mutations will be inside our resolvers folder. Inside that folder, create an index.js file and a User folder.

Inside the User folder, we’re gonna create an index.js file and write our mutations.
In our resolvers folder, in our index.js file, we’re gonna import all the resolvers that we have. For now, we have the User resolver.
import { mergeResolvers } from"merge-graphql-schemas";
import User from"./User/";

constresolvers= [User];

exportdefaultmergeResolvers(resolvers);

Now that all our resolvers and mutations are ready, we’re gonna modularize our schema.
Modularizing our schema
Inside our folder called graphql, go to our index.js and make our schema, like this:

Now that our schema is done, go to our root folder and inside our index.jsimport our schema.

After all that, our schema will end up like this:
Playing with our queries and mutations
To test our queries and mutations, we’re gonna start our server with the command npm run server, and go to localhost:4000/graphql.

Create user
First, we’re gonna create our first user with a mutation:
mutation {
  addUser(id: "1", name: "Dan Abramov", email: "dan@dan.com") {
    id
    name
    email
  }
}

After that, if the GraphiQL playground returns to you the data object that we created, that means that our server is working fine.

 The data object that GraphiQL Playground returned for us. 
Delete user
To delete a user, our mutation will go like this:
mutation {
  deleteUser(id: "1", name: "Dan Abramov", email: "dan@dan.com") {
    id
    name
    email
  }
}

Like the other one, if the GraphiQL playground returns to you the data object that we created, that means that our server is working fine.

Get all users
To get all users, we’re gonna run our first query like this:
query {
  users {
    id
    name
    email
  }
}

Get a specific user
To get a specific user, this will be the query:
query {
  user(id: "2"){
    id
    name
    email
  }
}
And we’re done!
Our server is running, our queries and mutations are working fine, we’re good to go and start our client. You can start with create-react-app. In your root folder just give the command create-react-app client and then, 

if you run the command npm run dev, our server and client will run concurrently!
. . .
All the code from this article is available here.