Build a complete app with React and GraphQL-3

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

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

We have added two more authors and some of their books, by the mutations from part-2.

Image for post
Image for post
More Books

We will now update our return statements, so that our Queries works again. Now, they contain mongodb methods to get the data. So, let’s edit our schema.js

Now, let’s check whether our Queries are working correctly. First query is to get all the Books.

Image for post
Image for post
Get all books

The next one is to get all Authors with their books.

Image for post
Image for post
Get all authors

Next, is to get details of a book

Image for post
Image for post
Details of a book

And the last one is to get details of an author

Image for post
Image for post
Details of an author

Now, there is a minor issue in our logic. We can add a new book or author, with less fields. Consider the below case, where we add a book only with it’s name.

Image for post
Image for post
Junk Book

We can verify in mongoDB also.

Image for post
Image for post
mongoDB verification.

Now, to avoid this we add a new GraphQL property GraphQLNonNull

So, open your schema.js and do the changes, marked in bold.

Now, if we go to our Graphiql we won’t be able to add anything without mandatory fields.

Image for post
Image for post
Not null not allowed

Next, we will add front-end logic which is React in our App. So, go ahead to your root directory and create a client with create-react-app.

Image for post
Image for post
create-react-app

Next, we start our react client.

Image for post
Image for post
cd and npm

Now, we have our client running at port 3000 and server running at port 4000.

Next, we clear some of the junk which comes with react app. In your src folder of client, delete everything except App.js, index.js and

Image for post
Image for post
Keep bare-bones

Also, keep the index.js simple as below.

Now, the App.js to be changed like below.

And the index.css as below.

It will render our react app like below.

Image for post
Image for post
Our React app

Now, create a new folder components inside src directory and add a file BookList.js to it.

Image for post
Image for post
BookList.js

Next, we will add a class based component in BookList.js.

Next, add this component in App.js

We will need a GraphQL client to contact, our GraphQL server and the one which we will use is Apollo.

Go ahead and stop your client and install the below packages needed for graphql client.

Image for post
Image for post
GraphQL client

Note: Ran into an issue here, after npm install apollo-boost react-apollo graphql — save. Found the solution online and it was to delete node_modules folder inside client and do yarn install

Now, let’s start using graphql. We will edit our BookList.js file to get data from graphql server.

On checking what we are getting through console.log, we get a nasty cors error.

Image for post
Image for post
cors error

So, we will install the cors module in our server. Stop the server and npm install it.

Image for post
Image for post
cors install

Now, go to app.js inside server folder and add cors

Now, refresh your App and you won’t get the error.

Image for post
Image for post
Won’t get cors error

Now, that we are getting our books correctly we will update our BookList.js to show the books on screen.

Here, we added a method displayBooks() to display the books. If you have noticed the console.log in the earlier part, the first time an empty list is rendered when loading is true. We get out book list only on second part when loading is false.

Image for post
Image for post
The Loading

This completes our call and we get all our books displayed on the App.

Image for post
Image for post
Top Books to read

This concludes part-3 of the series. You can find code till here in the github link.

You can find the final part-4 here.

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