Build a complete app with React and GraphQL-1

We are starting a new series and it’s about the latest GraphQL. Here we built an App, with React in the frontend and GraphQL in place of REST API.

This series have been inspired by this youtube tutorial from freecodecamp. We will be using the below techs.

Image for post
Image for post
Our Tech

Lets start right with our App. Open up your terminal and create a directory react-graphql and then a directory server inside it. Inside the server directory do npm init to create a package.json file. Press enter for everything to choose the default option.

Image for post
Image for post
npm init

Next we will install express.

Image for post
Image for post
install express

Now, open up your code editor and create a new file app.js in the server directory. The content for the same is below.

After this go to your terminal and start the server by node app.js

Image for post
Image for post
express server

But, we will not run the express server by node, but instead a npm package called nodemon. This package keeps track of any changes to our server code and restarts the server.

Image for post
Image for post
install nodemon

We will again start our server by nodemon app.js

Image for post
Image for post
nodemon app.js

Next, we will install two more packages of graphql and express-graphql

Image for post
Image for post
graphql

Now, create a new folder schema inside server and then a new file schema.js inside it.

Image for post
Image for post
schema.js

In schema.js put the below code. Here, we are first defining a type BookType and then a query called RootQuery to query it.

Now, we will use the same in our app.js

Next, we will add some dummy data in our schema.js as our database is still not ready. And also inside our resolve, we will use find to return the book whose id have been passed as args.

Next, we will use the amazing graphiql tool to check our query as our front-end is not ready yet. We will need to configure it first in

Next, go to http://localhost:4000/graphql in browser and you will see the graphiql tool.

Image for post
Image for post
Graphiql

Click on the Docs on the top right corner and you will get the documentation of the queries available to this server.

Now, we can query the GraphQL server for book with id of 2 and it will return it. We need to update the query in the editor and press play button.

Image for post
Image for post
id 2

Same for id of 3, but don’t want id in return statement.

Image for post
Image for post
id 3

If we query an non-existent id then we will get null

Image for post
Image for post
non-existent id 4

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

You can find part-2 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