Let’s Build a MongoDB + Express + React + GraphQL + Relay Modern Full Stack Web App (From Scratch!) — Back End Part

jelo rivera
Jan 23 · 7 min read
React x Relay x GraphQL

Hi! You can find the second part of this article in the link below.

Second part of this article. Configuring the front end using React and Relay.

I’ve picked up a few neat things since my last article about web app stacks and I wanted to share them with you guys. We will create a basic notes web app that encompasses all of the tech mentioned above. CRUD, cloud mongoDB, React Front End, Relay Modern State Management (bonus updater tutorial), graphQL Queries and Mutation.

As a fellow software engineer, I have struggled finding articles that teaches the basic applications of these technologies into a single real world app. That is why I published this article. We will be building this app from scratch so get your coding fingers ready. (piece of advice, I will post the final git repo of this web app at the end of the article so that you can follow me through a step-by-step process. This will help you have a firm grasp on the theories/ideas that these technologies put to the table).

In this article we will be using the latest, top-of-the-line technologies that big tech companies are using nowadays. This article requires you to have at least a basic working knowledge on React, Javascript, Relay and graphQL. If you have these basic skill set, let’s get started on building and start coding! 👨‍💻👩‍💻

I deployed the final version of the web app here using Heroku. Please be patient when loading the web app. Heroku boots up the server when the website has been idle for a given period of time. Peace! :-)

GEARING UP OUR BACK END

Let’s start with our GraphQL + Express + MongoDB server stack. Open a terminal and let’s create a directory for our project. Let’s name it full-stack-app and create our server’s directory. Let’s initialize our server directory and install the following libraries.

mkdir full-stack-app
cd full-stack-app
mkdir server
cd server
mkdir src
touch src/index.js
npm init -y
npm install express express-graphql cors graphql mongodb

Notice that we have created our src root directory and created index.js. There we will initiliaze our server so proceed to type the code below inside src/index.js

backend — src/index.js

When you run node ./src/index.js the server should be up and running.

Now, let’s configure our MongoDB database. We will be storing our data in the cloud using MongoDB. Head on to their website and create your own account. Don’t worry it’s free. After signing up and logging in. Follow these steps. We will create our own free cluster and link it to the node server we just created.

  1. Choose create free cluster from the choices.
  2. Set up your free cluster by choosing your preferred DB region, etc.
  3. MongoDB Atlas will guide you so follow their tutorial and after that we will connect our cluster to our node server.
Atlas tutorial will tell you to:    3.a. Build your own cluster  - done :-)
3.b. Create your own database user
3.c. Whitelist your own IP address
3.d. Load Sample Data (optional)
3.e. Connect to your cluster

In the connect option in your cluster, select the “Connect your Application” option and copy the Connection string shown. We will need this in the next step.

Now, let’s get back to our node server code and create a directory named config inside our src directory. Inside our config directory, create a file named databaseConnection.js and write the code below inside it. Paste the string we copied earlier in the uri variable and change the db user credentials to yours.

Now we have to call this inside our index.js. Edit the index.js code as follows.

src/index.js
...
const graphqlHTTP = require('express-graphql');
const { setupDB } = require('./config/databaseConnection')
setupDB(v => console.log(v));const schema = {
// we will add this later
};
...

Run node .src/index.js again and we should see that our database is connected successfully.

Now, on to the GraphQL part of things. Create a graphql directory in our src directory and shape it like the folder structure below.

Code the following gists in their respective files and I will discuss the important parts below.

Starting with the schema.js then nodeTypes.js then NotesQuery.js and finally NotesMutation.js.

schema.js

Here we define our graphql root schemas, Query and Mutation. These are like the api routes that resolves to DB queries and other server related tasks.

nodeTypes.js

Here we create our own graphql object data type. We have a note type that has its own _id and content field.

NotesQuery.js

Here is our NotesQuery. This is will return all of the “notes” that is stored in our database once we get to creating them.

NotesMutation.js

Here is one example of our notes mutation. This will enable us to create a note once we call this mutation query.


Now these are all a lot to take in one breath so take your time and read and understand the code and idea behind it. You might be wondering where the NoteService stuff came from. It’s just a service class I created to abstract our mongodb repository queries. We will get to that in a minute.

We are now in the final part of our server set-up. We will just have to link our mongodb repository with our graphql queries. To do that create a folder structure like the one shown below.

services and repository

Just like what we did a while back, code the following gists into their respective js files and I will explain them as we go.

MongoDbRepo class

In this MongoDbRepo class we are just connecting to our MongoDB database and we expose some APIs that lets us do CRUD operations on our database entries.

Here, we use our MongoDbRepo class to instantiate a Repository that is linked to the “Notes” database where we keep all of our ‘notes’ entries. Take note that this is just for better scalability of our code plus a better abstraction of our data.


Phew! Almost done!

Now let’s modify our src/index.js code so that we link the graphql schema to the our express server. Change the src/index.js code as follows.

const express = require('express');
const graphqlHTTP = require('express-graphql');
const schema = require('./graphql/schema');
const { setupDB } = require('./config/databaseConnection');
const cors = require('cors');
const app = express();
setupDB(v => console.log(v));
app.use(cors());
app.use(
'/graphql',
graphqlHTTP({
schema,
graphiql: true,
pretty: true
})
);
app.listen(4000);
console.log('SERVER OK');

DONE! Now, let’s try our graphql server in the browser and see how this baby rides! Paste the url below in a browser to see our newly built graphql server.

http://localhost:4000/graphql

Try creating a note with this mutation query.

mutation {
createNote(content:"test") {
content
_id
}
}

Then, to see if our query worked, lets try querying of all the available notes in our server with the following query.

query {
notes {
_id
content
}
}

YAY! Now we have our back end beautifully set up, we should now proceed with creating our front end using React + Relay Modern. I will tackle that on the second part of this article. I wanted to have it in this article but I think that it will oversaturate this article so I think it’s better to have it on a separate one.

If you have made it this far, kudos! Give yourself a pat on the back and take time to absorb the ideas that these new libraries are trying to convey. The mind set that these technologies give to a developer is what truly empowers us to build things that make the life of human beings easier, for both the end users and the developers.

JavaScript in Plain English

Learn the web's most important programming language.

jelo rivera

Written by

Software engineer | web dev | front-end | React.js

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

7 really good reasons not to use TypeScript

More from JavaScript in Plain English

More from JavaScript in Plain English

5 Secret features of JSON.stringify()

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade