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”.

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

1. Apollo Client

2. URQL

3. Relay

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

First, let's create a new React app.

REST Link

Simple, right?!

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.

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.

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