GraphQL Tutorial #5 – Introduction to Apollo GraphQL

In this tutorial, we will learn how to create one full-stack ‘todo’ application using Apollo GraphQL, Node and React. We will use ‘material ui’ library for building the UI in React.js, ‘Apollo’ for connecting to the GraphQL server, ‘express’ for building the graphql server and MongoDB as the database.

We will create two folders inside the main project folder : ‘server’ and ‘client’. ‘server’ is for storing the server side code and ‘client’ is for storing the client side code.

Server setup :

First of all, create one folder called ‘server’ and open one terminal inside the folder. Next, start one ‘npm’ project inside the folder using ‘npm init’ command. Hit enter for each configuration options. After the configuration is completed, it will create one ‘package.json’ file inside the folder.

We need to install the following dependencies on the server side :

graphql: This package is the JavaScript reference implementation for GraphQL

express-graphql: GraphQL HTTP server middleware to use with Express

express: Express framework

mongoose: It is the MongoDB object modelling tool

nodemon: It will automatically restart the server if any change is detected

Install these dependencies with the following command :

npm i graphql express-graphql express mongoose nodemon

It will install the latest dependencies inside the project folder. Following are the versions that are installed on my machine :

+ [email protected]

+ [email protected]

+ [email protected]

+ [email protected]

+ [email protected]

If you want to use the same versions, you can change them inside the package.json file.

For implementing the server, we need the following files :

1. Main server file

2. GraphQL Schema file

3. MongoDB model object files

Hosting the database:

You can host a MongoDB database on any website like MongoDB Atlas[https://www.mongodb.com/cloud/atlas], but for this tutorial, we are going to start one Mongo server locally. Make sure that you have MongoDB installed on your system. We will also use Robo3T as the MongoDB management tool.

Create one folder ‘db’ inside the root project directory and execute the following command to start MongoDB in this directory :

mongod --dbpath ./

It will print the port number where MongoDB is started:

waiting for connections on port 27017

You can try to open ‘http://localhost:27017’ on a browser to verify that the MongoDB is actually started on this port. It will print a message like below on the browser:

“It looks like you are trying to access MongoDB over HTTP on the native driver port.”

Start the server:

Create one folder ‘src’ and create one file ‘server.js’ in it. All our source code file will go inside this ‘src’ folder.

Open the ‘server.js’ file and add the below code in it :

Inside the ‘package.json’ file, modify the ‘scripts’ block like below :

Now, in the root directory, execute the below command to start the server :

npm run dev

If everything goes well, you will see the below message in the terminal:

server is listening on 4000

connected to the MongoDB database

i.e. the server is running on port ‘4000’ and MongoDB is also connected.

Create the Models:

Our application will store a list of tasks and for that we need only one model object class. Create one new folder ‘models’ inside the ‘src’ folder and create one new file ‘task.js’ inside ‘src/models’ folder. Add the following code in this file :

i.e. our tasks will have one autogenerated ‘_id’ and one ‘taskName’.

Create the Schema:

We need the following query and mutation for our app:

Query:

– Fetch all tasks

– Fetch one single task with its id

Mutation:

– Add one task

– Delete one task

Let’s start with the fetch all tasks query. Create one folder called ‘schema’ inside the ‘src’ folder and create one file ‘schema.js’ in it and add the below code in this file:

Here,

– we are using ‘graphql’ module and the model class ‘task’

– GraphQLObjectType, GraphQLList, GraphQLString, GraphQLSchema, GraphQLNonNull are used for creating a GraphQL object, list, string, schema and non-null value.

– ‘Task’ is the type of ‘task’ object

– ‘Query’ is used to hold all different types of queries. Currently, we have only one query ‘tasks’ to fetch the list of tasks from the MongoDB database. Inside the ‘resolve’ function, we are fetching all the tasks.

– Finally, we are exporting one GraphQL schema using the query.
Change the ‘server.js’ file as below to use the above schema in the express server :

It will start our server with one query ‘tasks’. Open “localhost:4000/graphql” on a browser window and try to execute the query like below :

As you can see that the server is returning an empty list of tasks.

Add, Delete a task :

We can add the other properties like add, delete, fetch single task similarly in the schema.js file.

The final schema.js file will look like as below :

Here, we have defined two queries and two mutations. ‘tasks’ is for retrieving all tasks, ‘task’ is for retrieving one single task, ‘addTask’ is for adding a task and ‘deleteTask’ is for deleting a task.

Restart the server and try the below queries on GraphiQL :

a) Add a task :

b) Get all tasks :

c) Get one single task :

d) Delete one task:

Client React application:

Our final Application will look like below :

Using the ‘ADD’ button, you can add any new task. The task will be saved in MongoDB as explained above. Similarly, with the ‘DELETE’ button, you can delete a specific task.

First of all, move to the root folder and create one new react app ‘client’ using the ‘create-react-app’ cli :

create-react-app client

We are going to use material ui in this application. Following are the dependencies we need to install using ‘npm install’ command :

Install these dependencies, move to the ‘client’ folder and start the app using ‘npm start’ command. It will run the app on ‘localhost’ ‘3000’ port.

We need to add three React components for the application :

AddTaskComponent : Component for adding a new task

TaskComponent : Component for showing all tasks

TaskComponent : Component for each task with the delete button

Also, we need one ‘queries’ file to list down all the graphql queries.

Let’s create these files inside the ‘client/src/’ folder with the following changes :

queries.js

Here, we have created one query ‘getTasks’ and two mutations ‘addTask’ and ‘deleteTask’. You can see that the queries and mutations are the same as we have used in the ‘graphiql’ tool above.

AddTaskComponent.js

Here, the ‘addTask’ function is used to add a new task.

‘this.props.addTask’ will call the ‘addTask’ mutation with ‘taskName’ parameter. ‘this.state.text’ is the text that the user has entered. Once this mutation is completed, it will call the ‘getTasks’ query to fetch the tasks again.

TaskComponent.js

This component is used for listing down all tasks. ‘fetchTasks’ is used to fetch all tasks and ‘deleteTask’ is used for deleting a task. Actually ‘TaskListElement’ will call ‘deleteTask’ method. “TaskListElement” component is for each task with a ‘Delete’ button.

TaskListElement.js

This component is used for showing each task. We are using it inside ‘TaskComponent’.

For using ‘Apollo’ in our app, we need to make a little bit change to the ‘App.js’ file :

We have created one ‘ApolloClient’ to connect to the ‘graphql’ server and wrapped the application with ‘ApolloProvider’ component.

App.css :

That’s it. Here we have completed our Apollo GraphQL full stack application. Make sure to run the express server and MongoDB with the application. You can check the database using Robo3T to learn more about how the database is adding data.

Tutorial Index:

  1. GraphQL Tutorial #1 -Introduction
  2. GgraphQL Tutorial #2 – Setting Basic Project in GraphQL
  3. GraphQL Tutorial #3 – GraphQL Components
  4. GraphQL Tutorial #4 – GraphQL Operations
  5. GraphQL Tutorial #5 – Introduction to Apollo GraphQL
  6. GraphQL Tutorial #6 – 51 Most Important GraphQL Interview Q&A

Add a Comment

Your email address will not be published. Required fields are marked *