Full stack implementation of GraphQl-Basic setup.

Before you go any further. This blogpost covers the basic server and client side setup to get going with GraphQl. If you don’t know what GraphQl is get yourself familiar by following this link

GraphQL is a Specification for client-server communication and not an Implementation.

To put this rather simply GraphQl is not opinionated about the application architecture. It is language agnostic and can be implemented regardless of the underlying language or system. In this blogpost we are using React and Apollo on the Frontend and Express and MongoDb on the backend.

The layers of Graphql Stack:

Backend:-

First:-

First layer of GraphQl stack is an HTTP server that is responsible for receiving the queries from the client. So Let’s quickly roll an HTTP server with Express .

Make your directory structure as below:-

-graphql(parent dir).
 - Server.(sub dir of garphql)

Run the below command in the root of your server directory.

npm install express

Note: Make sure you have npm installed on your system.

The above command will create a package.json file with express as its dependency.

Now create an app.js file in the root of your server folder. And inside your app.js file add the below code:-

const express = require (‘express’);
const app = express();
app.listen(5000, () => {
  console.log('Listening to requests on port 3000');
});

In the root of your server folder run node app and Hurrah! our app is up and running on port 5000. You can use any number as per your liking.

Note :- You can also install nodemon package to watch the live changes on your server side so that you don’t need to run node app every time.

Second:-

Second layer or we also can call this as a core layer is where we process our queries. This includes several parts:-

1. Defining our Schema.
2. Parsing and resolving the query.
3. Generating the output.

To achieve the same we need to set up GraphQl to work with our application we just build above.

Run the below two commands in your server directory.

npm install graphql
npm install express-graphql

Note:- Express by default doesn’t understand GraphQl. So we need to add express-graphql library to help express understand the graphql.

In your app.js add the below code.

const graphqlHTTP = require('express-graphql');
const schema = require('./schema/schema')
app.use('/graphql', graphqlHTTP({
 schema,
 graphiql: true
}));

The above function is invoked whenever a request to GraphQl is made. It acts as a middleware that accepts schema as its argument which tells our express-graphql about how it should process the data.

For now just create a schema folder in your server root directory with a schema.js file. I have already explained about what schema is in GraphQL in this blogpost.

We have also set graphiql to true. This allows us the access to the in-browser ide that makes it easier to write our queries and provides us with a visual representation of our data set.

Third:-

The third layer is the database layer. This is where we tie our GraphQl schema to the database. In-between the database and server layer there are multiple tools like PostGraphile and Prisma that sit above one or more databases and translate between the database and GraphQL. Some can serve GraphQL clients directly, some might act like an ORM for a database. They typically offer boilerplate functionality (such as CRUD operations), and some expose more powerful database features. We won’t go deep into how this works so let’s just setup a MongoDb database. you can follow this tutorial for the same.

When you are done setting up the database run the below command.

npm install mongoose

Mongoose is an ORM as i explained above that helps us to communicate with our database much easier.

When you are done add the below code to your app.js file to setup the database connection.

const mongoose = require('mongoose');
//connect to mongodb database
const config = {
useNewUrlParser: true,
};
mongoose.connect(‘Your database connection string here’, config);
//Log the message to the console when the connection is made.
mongoose.connection.once('open',() => {
  console.log("Yooo this works!");
});

In your server root directory add the models directory. This is where we will create our data model for our MongoDb Database.

FrontEnd :-

On the front end side there are couple of main elements:-

1. Tools and libraries that help us to construct queries and send them to the server. Some of them offer bindings for the specific frameworks/libraries others can be used independently.
2. Tools that act as gateways to your server and offer functionality such as caching, monitoring, performance tracking and more. one of them being Apollo Engine that helps you implement and run GraphQL over REST or any other backend.

To get running with your client side setup we will use React as a javascript framework to query the data and Apollo which is a GraphQl client to help bind our react app with GraphQl.

React-setup:-

Go to your Graphql root folder and run:

npm install create-react-app client
cd client 
npm start

If you don’t know what react is follow the official documetation of Reactjs to get started.

Apollo-setup:-

In order to make queries to our server we need to setup the Apollo client. You can follow the official documentation for installing and configuring Apollo Client for your React app or you can just run the below command in your client directory.

npm install apollo-boost react-apollo graphql

After you are done installing the necessary packages replace your App.js in your client folder with the below code:

import React,{Component} from ‘react’;
import ApolloClient from ‘apollo-boost’;
import {ApolloProvider} from ‘react-apollo’;
//Apollo client setup
const client = new ApolloClient({
uri: ‘http://localhost:5000/graphql'
});
class App extends Component{
render(){
return (
<ApolloProvider client={client}>
<div id=”main”>
<h1>This is where we add our components</h1>
</div>
</ApolloProvider>
);
}
}
export default App;

A bit of insight in the above code:-

1. We just set up an Apolloclient which listens to a GraphQl endpoint.
2. We have also imported ApolloProvider from react-apollo that binds Apollo to react.

Wrapping up:-

This is it. We now have the basic setup to get working with GraphQl. Till now We have:-

1. A react app running on a port 3000.
2. An Apollo client which listens to a GraphQl endpoint at a port 5000.
3. A GraphQl server based on NodeJs using express.

P.s:- Will follow this up with how we can define and query our data in GraphQl. I think it is important to understand GraphQl in all its isolation and not get lost(as i did) with all the tools required for the same. This is why i have tried to separate the basic setup from the implementation.