Build a complete app with React and GraphQL-4

Welcome to part-4 of the series. You can find part-3 here.

This series have been inspired by this youtube tutorial from freecodecamp.

We will start from where we left. We will be first making an component to add books to our App, through the front-end.

We will add a new file AddBook.js in components folder.

Image for post
Image for post
AddBook.js

Now, we will add content to AddBook.js. You will notice that it is almost similar to BookList.js in previous tutorial. Only we are using a form to input the data and using GraphQL, to get the author list for the dropdown of author.

We will also include this component in App.js. So, update it as below.

Now, our App looks like below, with a working Author dropdown.

Image for post
Image for post
Author DropDown

Next, we will add some React state management to the file AddBooks.js, to store the value of the form. The changes have been marked in bold.

Next, it’s time to test the form by adding some data and clicking the “+” and checking the output on console.

Image for post
Image for post
Form working perfectly

Now, we will add the logic for mutation to add this data on GraphQL server. But since our AddBook.js will have more then one queries, we need to modify the logic a bit.

We will first move all the queries to a different file. Create a folder queries inside src and a file queries.js inside it.

Image for post
Image for post
queries.js

Add the following content to queries.js

Now, we will use getBooksQuery and addBookMutation inside our AddBook.js

The changes are marked in bold. We had to use another function compose from react-apollo, to use two queries. The this.props also changed and will contain both getAuthorsQuery and addBookMutation.

Let’s also make the change in BookList.js as we will use the query from queries.js

Let’s go to the browser now and add a new book, by entering the fields and pressing “+”.

Image for post
Image for post
Entering new book

But we don’t see the new book reflected here as we don’t have logic for it yet. So, we can check it first at mongoDB.

Image for post
Image for post
Checking in mongoDB

Next, go to the browser and refresh it and you will see the book.

Image for post
Image for post
Refresh the browser

Now, to solve the refresh issue we need to run the query getBooksQuery as soon as the mutation query is ran.

We can do this simply by adding a refetchQueries after the mutation in AddBook.js file.

Now, add a book and click on “+” and you will get the book added to the page instantly.

Image for post
Image for post
Book added instantly

Now, we are going to add the functionality to show details, when we click on a book. So, create a new file BookDetails.js inside components folder.

Let’s first add click functionality to each book from the BookList.js and get the book id. This we will pass to the BookDetails component.

We will now add the query to get detail of a book in queries.js file. Here, we will not only get the id, name and genre of the book but also, the author’s id, name and age. We will also get the list of all other books by the author

Now, let’s add code to file BookDetails.js . Here, we are doing a graphql query(bold) from the props, which we have received from parent component ie BookList and then passing it to the query getBookQuery in queries.js.

On receiving the data back in this.props.data.book, we are displaying it.

Now, when we go and click on any book, we will get it details.

Image for post
Image for post
Book Details

Our App is complete, but it’s very ugly. So, we will go ahead and add the css to index.css file.

It will show our final App.

Image for post
Image for post
Our beautiful app

This concludes our series. Hope you liked it. You can find code till here in the github link.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store