GraphQL + REST API

Pre-requisite

• GraphQL
• React

Before Diving into the topic, let's understand what is GraphQL first.

GraphQL is a query language for your API and a server-side runtime for executing queries using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data.

1. One Endpoint
2. Declarative Response
3. Fewer Server Requests
4. Auto Documentation of Queries

The mantra of GraphQL is - “Ask for what you want − and get it”.

Calling REST APIs from a GraphQL client opens the benefits of GraphQL for many developers.

Now, let's see how we can use the existing REST APIs as GraphQL Query.

There are many libraries to support the efficient way of querying data using GraphQL.

Like:

1. Apollo Client

Introduction to Apollo Client

2. URQL

URQL Documentation

3. Relay

Relay

But for using REST API with GraphQL, Apollo client is the only package to support REST as of now.

Let's get our hands dirty.

First, let's create a new React app.

We’ll create a new REST Client file.

For integrating the REST API, apollo-client provides a package apollo-link-rest to create a REST client.

REST Link

Simple, right?!

Let’s create a simple to-do app to see how to do CRUD operations using REST API in GraphQL.

1. Writing the query to get all the to-do data from the backend.

We need to write a GraphQL query to get all the data.

Just two changes from the traditional query.

1. @rest - it's added to denote a REST API
   
   
2. path - to mention the path of the API.
   

2. Executing the GET ALL query and displaying the data.

3. Adding new todo data using the query.

4. Executing the Add Todo in the code.

To pass the values to the body of the API call, we can pass them inside the `addTodo` function as variables parameter. Inside variables, we can pass the data as part of the `input (bodyKey input in the query)` object.

5. Delete a Todo by id.

6. Executing the Delete todo in the code.

As simple as that 😎.

Instead of Converting the existing REST APIs into a GraphQL API, you can now directly integrate REST APIs with GraphQL queries.