Building a Live Chat with GraphQL + MongoDB + NodeJs + Docker

First of all to understand this tutorial you need to have a basic knowledge with javascript and NodeJs.

Let's start our node app:

yarn init -y

I'll create a Dockerfile and docker-compose to help us to start and live reload our application. And to save time I will also start my mongoDb inside a docker container:

And setup our .env :

Now we need to install some packages:

yarn add express mongoose http-status
yarn add nodemon -D

And setup our scripts to run the node server editing the package.json file:

That’s enough for now. Let’s starting coding. We will create the src/index.js to start our server and connect to our database:

And we need to setup our express server as well:

If you didn’t forget any step now you can run the docker command below in your terminal to start the app for the first time (it will build the containers, start your mongo database and your node + express app). That may take a few minutes, so go make a coffee while you wait ☕️ .

docker-compose up --build

And the app is working and connected to the database.

Now we can start connecting our express integration to GraphQL server using Apollo Server Express. So let's install the apollo-server-express, apollo-server, graphql and graphql-tools:

yarn add apollo-server-express apollo-server graphql graphql-tools

And we need to setup the src/server.js:

Navigate to http://localhost:4000/graphql and see the apollo server playground, where we will debug our queries and mutations. You can see that we didn't setup our types and resolvers yet. But that's ok, let's continue :)

First let's setup our models: user, message and room. I'll place it at src/models.

Now we will code our queries and mutations. That will work basically as endpoints from our GraphQL api. Queries are similar to get http protocol method and mutations are similar to post, put, patch and delete methods, all together :). But our star to create real time messages are subscriptions that will work with pub sub to get real time updates from our GraphQL server.

Inside /graphql folder we will create three folders to place our (user, message and room) types and resolvers.

graphql/user

graphql/room

graphql/message

Now we have everything ready to glue and call inside our server.js. Let's do it :P

We need to create three files inside our /graphql folder; resolver.js, schema.js and type.js:

And to finish we just need to import the new schema inside our server.js file:

To see everything working you just need to follow the steps below:

• Create a room (room mutation);
• Create a user (user mutation) passing the room id as parameter;
• Subscribe to your room messages sent (messageSent subscription) passing the room id as parameter;
• Send your messages (message mutation) passing the content and author id as parameters.
• Enjoy your subscription printing your messages in real time :)

If something went wrong with your code you can see the final result here: https://github.com/antoniomesquita09/medium-chat-backend

Hope you enjoy and if you have any doubt or suggestions to improve this code tutorial leave a message below 😁

Linkedin: https://www.linkedin.com/in/antonio-mesquita-b51aa6183/

Personal site: https://antoninhom.com/