Table of Contents

• What is GraphQL?
• Why Use GraphQL over a Traditional REST API?
• GraphQL With REST
• How To Use REST API in GraphQL?
• How to Implement REST API in Apollo Client?
• Creating an App

Pre-requisite

• GraphQL
• React

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

What is GraphQL?

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.

Why Use GraphQL over a Traditional REST API?

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

GraphQL With REST

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.

How To Use REST API in GraphQL?

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

Like:

1. Apollo Client

Introduction to Apollo Client

URQL Documentation

1. Relay

Relay

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

How to Implement REST API in Apollo Client?

Let’s get our hands dirty.

First, let’s create a new React app.

npx create-react-app apollo-rest-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

restClient.jsimport { ApolloClient, InMemoryCache } from '@apollo/client';import { RestLink } from 'apollo-link-rest';
// Set `RestLink` with your endpointconst restLink = new RestLink({ uri: "<http://localhost:4001>" });// Setup your clientexport const restClient = new ApolloClient({link: restLink});

Simple, right?!

Creating an App

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.

Traditional GraphQL Query
const GET_GRAPHQL_TODOS = gql`query getTodos {getTodos {idtitlecompleted}}`;​Rest + Graphql Query
const GET_REST_TODOS = gql`query getTodos {getTodos @rest(path: "/todos") {idtitlecompleted}}`;

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.

import { useMutation, useQuery } from "@apollo/client";import { GET_REST_TODOS } from "../query";import { restClient } from "../restClient";export const Todos = () => {//getconst { data } = useQuery(GET_REST_TODOS, { client: restClient });return data?.getTodos?.map(({ id, title, completed, }: any) =><div key={id}><p className={completed ? "Todo-task completed" : "Todo-task"}>{title}</p></div>);};

3. Adding new todo data using the query.

Traditional Queryconst ADD_TODO_GRAPHQL = gql`mutation CreateTodo($title: String!$description: String!$completed: Boolean!$user: String!) {createTodo(title: $titledescription: $descriptioncompleted: $completeduser: $user) {idtitlecompleteddescriptionuser {idnameage}}}`;Rest + GraphQL Queryconst ADD_TODO_REST = gql`mutation CreateTodo {createTodo(input: $input)@rest(path: "/todos", method: "POST", bodyKey: "input") {idtitlecompleteddescriptionuser {idnameage}}}`;

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.

import { useMutation } from "@apollo/client";import { useState } from "react";import { ADD_TODO_REST } from "../query";import { restClient } from "../restClient";export const Todos = () => {const [newTodoTitle, setNewTodoTitle] = useState("");// addconst [addTodo] = useMutation(ADD_TODO_REST, {client: restClient,});return (<div><form
onSubmit={(e) => {e.preventDefault();addTodo({variables: {input: {completed: false,title: newTodoTitle},},});setNewTodoTitle("");}}><input
value={newTodoTitle}onChange={(e) =>setNewTodoTitle(e.target.value )}/><button type="submit">Add Todo</button></form></div>));};

5. Delete a Todo by id.

Traditional Queryconst DELETE_GRAPHQL = gql`mutation deleteTodo($id: String!) {deleteTodo(id: $id) {idtitlecompleteddescription}}`;Rest + GraphQL Queryconst DELETE_REST = gql`mutation DeleteTodo($id: String!) {deleteTodo(id: $id)@rest(type: "Todo", path: "/todos/{args.id}", method: "DELETE") {NoResponse}}`;

6. Executing the Delete todo in the code.

import { useMutation } from "@apollo/client";import { useState } from "react";import { DELETE_TODO_REST } from "../query";import { restClient } from "../restClient";export const Todos = () => {//getconst { data } = useQuery(GET_REST_TODOS, { client: restClient });// deleteconst [deleteTodo] = useMutation(DELETE_TODO_REST, {client: restClient,},});const deleteTodoById = async (id: string) => {deleteTodo({variables: {id,},});};return data?.getTodos?.map(({ id, title, completed, }: any) =><div key={id}><p className={completed ? "Todo-task completed" : "Todo-task"}>{title}</p><button onClick={() => deleteTodoById(id)}>Delete</button></div>)};

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.

This article was written by Yogeshwaran Ramesh, Senior Software Engineer at GeekyAnts.