googleads
Build A Web App With React, GraphQL And Apollo
preloder
Javascript FrameWorks ReactJS Web Development

Build A Web App With React.js And GraphQL

 

What Is Graphql?

GraphQL is a new open source API standard which is a powerful alternative to REST API that developed by Facebook. 

GraphQL is a syntax that exclusively describes how to get data that helps the user to get the exact data they like to extract the sources.

Why Should I choose GraphQL?

                
 In REST API, we need to send overloading data to the front end. For example, if you like to fetch the user data like below,

 

In the above case, we didn’t require any data addresses but we only need the name & country of the user in REST API.
So we can get it done in 2 ways,

  1. Making many query parameters
  2. Creating multiple endpoints

In first method, making more query parameters will be quite hard as it requires us to handle more logics in the back end.

Coming to the next solution, Creating the multiple rest API will eventually slow down the development process of application.  

Either way, both can help us to achieve the solution but literally this make us to face the complexities which are unnecessary.

Hopefully, you might have guessed why we’re choosing Graphql here.

Graphql provides a declarative data fetching method to the client side which exclusively helps us to fetch the exact data we need. And, the beautiful part is, you can get done all these processes using a single API from Graphql.

Create A GraphQL Server

First, we need to understand something that the GraphQL is not a complete framework as it needs to be integrated with any backend frameworks like Node.js, Rails to make it work. Also, keep in mind that GraphQL isn’t tied to any specific database or storage engine, instead it will be backed by your existing code and data.

Too many explanations right? Okay, let’s jump straight to the concept!

To create a GraphQL server, here am planning to use ruby on rails, similarly, you can choose any of your favorite languages. But before that, you can also check the list of languages you can implement with GraphQL here https://graphql.org/code/

Let’s Build A Simple TODO App With GraphQL

To build this, am going to use

  •            Rails 5.2.3
  •            Ruby 2.6.1
  •            Postgres database

step1:  Create a rails app using below command.

Step2: I have included three gems in Gemfile as you can see below,

Step3: Then install the Gem with below code.

Step4: Create the folder structure

 

Now, you can see the folder created by the graphQL gem

 

This command will also add a new POST endpoint to our routes which gets mapped to app/controllers/graphql_controller.rb  so, when you execute this method this will serve as our main API entry point too.

 

Step6: Open http://localhost:3000/graphiql  and you can view the GraphQL server as shown in the below pic,

Step 7: Create a task model and table with the following command,
         

 

 

GraphQl Types

For the Task models, we need to create a series of types.  GraphQL knows the type of data it needs to send back when any request of an event occurs. This is closely similar to Rails’ active_model_serializers or JBuilder and these types will set up the structure of our models from the API’s point of view. In our scenario, we’ll specify the columns, model methods, and others to return data to the front-end application. Additionally, more information on declaring types can be found here. http://graphql-ruby.org/getting_started#declare-types
           
Inside the types folder, create task type there you can create the field which will help to return the data.

In case, if you want to have any association then you can create a separate type and then try to link in the task table so that you can able to query associated table data.

Paste the below code in the mentioned route path then you can modify the value of fields based on your requirement,

# app/graphql/types/task_type.rb

 

All the incoming requests are routed to the two main types,
     1) query_type.rb
     2) mutation_type.rb.

Those files are already referenced in our schema file and works closely similar like Rails routes & resources.

Now you can add the query field and tasks, also the respective method of tasks in the query_type file to get the data.

#/app/graphql/types/query_type.rb

 

Next, you can add some seed data in DB and visit the http://loaclhost:3000/graphiql  there you can also query,

So your screen might look like this,

Implementing mutations In GraphQL

Mutations will help us to create, update, and destroy the data. Also, it will help us to establish the associations between the existing data. 

To know more about mutation you can read here https://graphql-ruby.org/mutations/mutation classes

Now create the new folder inside the mutation to extend the class,

  • Arguments – Here we can specify the type of arguments to accept as params that are required. This is closely similar like defining the strong params in the Rails controller but it has enhanced fine-grained control.
  • Fields – Similar concept as Query fields listed above. In this case, we accept the arguments to create a user and to return the user field with the new model along with the errors received.
  • Resolver – The resolve method is the place to execute ActiveRecord commands. This method returns a hash with keys and these key matches the above-listed field names.

Like these, here you can add arguments which are params that what we need to pass in order to create an action. Similarly, filed are the query which we are going to return after creating the record. Finally, we can able to use the active record method (like new, create, save) in the resolve part.

 

Then add this new mutation to the main mutation type class and it will be displayed in our GraphQL, 
Add the below code in the mentioned path,

#app/graphql/types/mutation_type.rb

 

Now you can able to add the data through the mutation in the database as we have shown in the picture

Similarly, update and Delete are also have the same process, you can check my GitHub link for more details https://github.com/guru28/todo_api

Connect React To GraphQL

Create the new react app
  

This will create the empty app to start the development, then we need to install some front end dependencies as mentioned below,

Then create the new file apollo.js, and add the base URL of graphQL API

 

To fetch the data, we are using Apollo’s package for querying. Here the React component must be able to connect with the GraphQL server using the client. Also keep in mind, that our entire app needs to be wrapped in an ApolloProvider component & all these changes are needed to be done in index.js.

#/src/index.js

// If you want your app to work in offline too with faster loading, then you can change it from unregister() to register().

Learn more about service workers: https://bit.ly/CRA-PWA

Create a new file src/TaskViewer.js for fetching the data which will be used to render it in a table :

 

Now we should include the TaskViewer component in our src/App.js file
After adding, it must look like this:

 

Finally, once you start the npm, it will fetch all task and will list in the index page.

If you need the complete source code you can check my git hub link https://github.com/guru28/graphql-react-todo

Like What You're Reading ?

The following two tabs change content below.

Guru Moorthy

An active Full Stack Blockchain developer having 3+ years of experience in Blockchain. With great passion, he immensely adapted himself in complete life cycle of Blockchain & Crypto development. And, This rising Blockchain enthusiast have forked and modified 12 out of top 20 Crypto coins and aiming to explore all use cases of Blockchain.

Leave a Reply

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

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call