Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

2500+

Clients projects

1458

Happy customers

React JS

How To Integrate GraphQL With React: Using ApolloClient and Direct Approaches

Last Updated on September 4, 2024

Quick Summary

If you are looking for a complete guide to integrate GraphQL with React, you are at the right place reading for it. This blog post explores all the crucial aspects of integrating GraphQL into your React application. We will also discover the benefits of React GraphQL integration and a step-by-step guide for setting up and using GraphQL API with Apollo Client. Additionally, we will learn about fetching and modifying server-side data without relying on Apollo Client.

Introduction

In the ever-evolving web development environment, React and GraphQL are two of the most powerful technologies that can be combined together to enhance the efficiency, performance, and user experience of web applications. Both, GraphQL and React are widely used for their capabilities to address the modern web development needs.

React, is a popular JavaScript library renowned for its ability to craft dynamic, highly responsive user interfaces. React’s component-based architecture and virtual DOM make it an irresistible choice for developers who seek to develop fast, secure, and scalable applications.

However, the true potential of React can be experienced when combining it with a powerful data-fetching solution like GraphQL. GraphQL is a revolutionary query language for APIs that changes the way programmers interact with data. Unlike traditional REST APIs that require multiple endpoints and queries to fetch different datasets, GraphQL provides you the ability to request the exact data you need by executing just a single query. The efficiency and flexibility of GraphQL make it an ideal companion for React, enabling the creation of highly optimized and scalable web applications.

Now, let’s explore the key advantages of React js GraphQL integration and how to integrate GraphQL with React by implementing Apollo Client and without it.

Why Businesses Embrace React GraphQL Integration - Top Benefits

Seamless, effective, and flawless data communication is crucial for hassle-free web application design and development. Nowadays, businesses are increasingly integrating GraphQL in React to build more efficient, scalable, and responsive web applications. This powerful combination of React and GraphQL helps streamline data management, enhance app performance, and deliver a seamless user experience.

GraphQL grants clients granular control over data requests. It allows developers to specify the exact fields they require, eliminating unnecessary data transfer. This flexibility leads to efficient data retrieval, especially for complex applications where UI components have varying data demands. Merged with React’s scalability and code reusability, this GraphQL integration with React enables building dynamic, cross-platform interfaces that excel. Here are several key benefits of GraphQL React integration.

Key Benefits of React GraphQL Integration

Efficient Data Fetching
By integrating GraphQL in React applications, the selective data fetching and query optimization features of GraphQL help enable a mechanism where apps only receive the essential data from the server. This not only minimizes the network overhead but also boost application performance, leading to a smother and more responsive user experience.

Simplified Data Management
With GraphQL’s scheme-based approach, you can simplify data management by providing a clear and structured way for seamless interaction with APIs. Developers find it extremely easy to understand and utilize the data flow within React applications. The outcome will definitely be more maintainable and scalable codebases, with the schema acting as a contract between the client and server

No Data Overfetching or Underfetching
Dissimilar to traditional REST APIs, GraphQL helps prevent problems of overfetching and underfetching data. This happens by allowing clients to request exactly what they seek from disparate data sources. GraphQL helps clients accurately specify their data needs, leading to efficient data retrieval to ensure your React apps remain lightweight and efficient.

Powerful Typing and Validation
When you integrate GraphQL with React, the strong typing system of GraphQl offers built-in validation. This further reduces the chances of errors and inconsistencies in handling. The powerful typing ensures that both the client and server are always in synchronization, making the application more reliable and stable. Overall, this enables early detection of data-centric problems and prevents runtime mistakes with its strong validation process.

Minimized Overloading
GraphQL can minimize server overloading by allowing clients to define the exact structure of their queries. When the server provides more data than the actual data the client requests, over-fetching occurs due to RESTful APIs. However, GraphQL solves this problem and facilitates efficient and effective network usage, all by providing accurate data the client seeks.

Data Retrieval Flexibility
If you need flexibility in data retrieval, it is beneficial to integrate GraphQL with React as you can easily define the structure and query requests with the use of GraphQL. Businesses can quickly adapt to changing data needs with GraphQL’s data retrieval flexibility. Whether you want to collect data from multiple sources or customize the response for different clients, GraphQL’s versatility makes it possible to retrieve particular data based on business needs.

GraphQL With React Configuration
The React GraphQL integration is simple, with tools like Apollo Client providing a smooth, straightforward configuration process. Apollo Client comprises features such as caching, error handling, and query batching. Thus, businesses can easily manage data efficiently within React applications.

Optimistic UI and Real-Time Updates
Integrating GraphQL in React, one doesn’t have to worry about anything as it supports optimistic UI updates and real-time data through subscriptions. The synergy between the two helps craft more interactive and dynamic user experiences. These features are definitely valuable for applications that need instant feedback, such as chat apps, where real-time data is very crucial to enhance user engagement.

How To Integrate GraphQL With React - A Step-by-Step Guide

From start to finish, this comprehensive guide will walk you through the process of integrating React and GraphQL in easy, simple steps. At the end, you will have a complete idea of how to integrate GraphQL with React seamlessly to build efficient, secure, and scalable applications.

Prerequisites
Before we dive into coding, ensure you have the following set up on your machine:

Node.js (preferably version 12 or higher)
npm (preferably version 6 or above)
A preferred code editor (like Visual Studio Code)
Basic understanding of React.js concepts
Access to a GraphQL API

Setting Up the GraphQL API with Node.js

To utilize the benefits of GraphQL, you’ll need a GraphQL API endpoint. You can use backend technologies like Node.js, Python, or Java to establish a server capable of handling GraphQL queries. Some of the popular libraries for this purpose include Apollo Server and Express GraphQL.

Let’s begin by demonstrating how to create a GraphQL endpoint using Node.js.

Creating a Node.js GraphQL Endpoint

Installation:

Ensure you have Node.js installed.
Create a file named server.js in your project directory.
Open your terminal or command prompt and navigate to your project directory.
Run the following command to install required packages:

 npm install

Now, install Apollo Server and GraphQL

 npm install apollo-server graphql

Code Implementation:

With all the necessary packages installed, we can now create endpoints using GraphQL.
The code snippet below showcases a sample Node.js backend with GraphQL:

const { ApolloServer, gql } = require('apollo-server');
// Sample data (you can replace this with your database)
 let employees = [
  {
    id: '1',
    name: 'John Doe',
    age: 30
  },
  {
    id: '2',
    name: 'Jane Smith',
    age: 25
  }
];
// GraphQL schema
const typeDefs = gql`
  type Employee {
    id: ID!
    name: String!
    age: Int!
  }

 type Query {
    getAllEmployees: [Employee!]!
  }
`;
// Resolvers
const resolvers = {
  Query: {
    getAllEmployees: () => employees
  }
};
// Create Apollo Server instance
const server = new ApolloServer({ typeDefs, resolvers });
// Start the server
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);

Running the GraphQL Server:

To run GraphQL server in Node js, Run below command in terminal

node server.js

The command above assumes “server.js” is the filename containing your endpoint code. You can choose any filename based on your preference.
Upon successful execution, the terminal will display the endpoint URL. This URL will be used to integrate Node.js with React.js.

Need Expert Assistance For Integrating GraphQL With React?
Hire Reactjs developer with unmatched skills and expertise in GraphQL React integration. Our experts help you with flawless integration without hindering your existing app performance.

Integrating GraphQL APIs in React.js application with ApolloClient

1. Setting Up the React Application

Before you can use GraphQL functionalities to the fullest, you will need to install Apollo Client in your existing React project. Apollo Client acts as a bridge between GraphQL and React, enabling us to interact with GraphQL APIs seamlessly.

npm install @apollo/client graphql

2. Configuring Apollo Client

Apollo Client acts as an interpreter between GraphQL and React.js. We can configure it by specifying the GraphQL API endpoint. Here’s an example configuration in src/index.js:

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import "./styles.css";
const client = new ApolloClient({
  uri: ‘http://localhost:4000/', // Replace with your GraphQL API endpoint
  cache: new InMemoryCache()
});
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

ApolloClient: ApolloClient is a state management library for JavaScript that helps manage data fetched from GraphQL APIs. It allows us to retrieve, update, and automatically synchronize data with the UI.
InMemoryCache: This component within ApolloClient stores and manages the retrieved data locally in the client’s memory.
ApolloProvider: This acts as a higher-order component that wraps our React application, providing the necessary configuration to interact with the GraphQL API.

3. Creating a GraphQL Query
In GraphQL, queries specify the exact data you want to retrieve from the API. Here’s an example query defined in src/query.js:
src/query.js

import { gql } from '@apollo/client';

export const GET_EMPLOYEES = gql`
  query {
     getAllEmployees {
       id
       name
       age
     }
  }
`;

query: This keyword indicates that it’s a GraphQL query operation for processing data.
getAllEmployees: It specifies the name of the GraphQL field we’re querying, which should be defined in the server’s schema.
id, name, age: These are the specific fields we request for each employee. The response will contain data based on these selections.
GET_EMPLOYEES: This constant variable stores the query for later use.

4. Fetching Data from the GraphQL API Endpoint

We’ll use a React component (Main.js) to fetch data from the API.

useQuery Hook: This is the primary method for executing queries within React components. We’ll import it from @apollo/client:

import { useQuery } from ‘@apollo/client';

Fetching Data: We can execute a query inside a React component using useQuery and passing our GraphQL query string. To achieve this, we’ll import GET_EMPLOYEES from query.js:

import { GET_EMPLOYEES } from './query';

Handling Response: When a component renders, useQuery returns an object from Apollo Client containing properties for loading, error and data. We can definitely utilize these properties to manage the UI state.

Here’s an example of how to use useQuery in Main.js:


import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_EMPLOYEES } from './query';
const Main = () => {
  const { loading, error, data } = useQuery(GET_EMPLOYEES);
  if (loading) return <p>Loading...</p>;
   if (error) return <p>Error :(</p>;
 
  console.log('data: ', data);
  return (
    <div></div>
  );
}
export default Main;
</i></b>

The code first checks the loading state. If it’s true, it displays a “Loading…” message.
If there’s an error, it displays an error message.
Once the data is successfully fetched (loading is false and there’s no error), we can access the data using the data field

When we run the command npm start, we will get the response in console as below:

This shows an array called getAllEmployees containing two objects with information about employees (ID, name, and age).

Customizing the Response: For example, if a user only needs id and name information, we can update query.js to:

import { gql } from '@apollo/client';
export const GET_EMPLOYEES = gql`
 query {
   getAllEmployees {
     id
     name
   }
 }
`;

This approach allows users to choose which properties they want in the response by modifying the query.js file. They can select any combination of id, name, and age.

5. Rendering Employee Data on the UI
Now that we understand how to manipulate the response using queries and how to handle the loading and error states, let’s display the retrieved employee data on the UI.

Here’s the updated Main.js component demonstrating how to render the data:

src/Main.js


import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_EMPLOYEES } from './queries';
const Main = () => {
  const { loading, error, data } = useQuery(GET_EMPLOYEES);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  console.log(data)
  return ( 
    <ul>
      {data.getAllEmployees.map(employee => (
        <li key={employee.id}>
          {employee.name}, {employee.age} years old
        </li>
      ))}
    </ul>
  );
}
export default Main;

Output:

Fetching Data with GraphQL Queries without Apollo Client

1. Creating an Object with GraphQL query:

To create a request object, we need two key components: the API endpoint URL and an options object.
The options object defines the POST request method, additional headers, and the request body containing the GraphQL query to be sent.

const endpoint = 'http://localhost:4000/';
const query = `
 query {
   getAllEmployees {
     id
     name
     age
   }
 }
`;

const options = {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
   },
   body: JSON.stringify({ query }),
 };

 const request = new Request(endpoint, options);

2. Sending the Request with Fetch:

Once the request object is built, use the fetch() method to send it to the server. This method returns a promise that resolves with the server’s response.

setLoading(true);
fetch(request)
  .then(response => response.json())
  .then(res => {
    setLoading(false);
    setFetchedData(res.data); // Store response in state
  })
  .catch(error => {
    setLoading(false);
    setError(error);
  });

The response data is stored in the state variable fetchedData. Here, an additional state variable loading is used to indicate when data is being fetched.

3. Handling Errors:

The server’s response may contain either retrieved data or potential errors. We use a catch block to capture any errors encountered during the request and store them in the error state variable. Here’s the complete Main.js component:

src/Main.js


import React, { useEffect, useState } from 'react';


const Main = () => {
 const [fetchedData, setFetchedData] = useState(null);
 const [loading, setLoading] = useState(false)
 const [error, setError] = useState()


 useEffect(() => {
   const endpoint = 'http://localhost:4000/';
   const query = `
    query {
      getAllEmployees {
        id
        name
        age
      }
    }
   `;

 const options = {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
   },
   body: JSON.stringify({ query }),
 };

 const request = new Request(endpoint, options);
 setLoading(true)
 fetch(request)
   .then(response => response.json())
   .then(res => {
     setLoading(false)
     setFetchedData(res.data)
   })
   .catch(error => {
     setLoading(false)
     setError(error)
   }
   );
 }, []);

 if (loading || !fetchedData) return <p>Loading...</p>;
 if (error) return <p>Error :(</p>;

 return (
   <ul>
     {fetchedData.getAllEmployees.map(employee => (
       <li key={employee.id}>
         {employee.name}, {employee.age} years old
       </li>
     ))}
   </ul>
 );
}

export default Main;

Take A Step To Upgrade Your React Application With GraphQL?
Share your unique project needs and goals with our expert React js consulting team to build an application from scratch or optimize it with GraphQL integration.

Modifying Server-Side Data with GraphQL Mutations without Apollo Client

In GraphQL, queries fetch data, while mutations modify data on the server-side. Mutations are similar to methods like DELETE, PUT, and PATCH in REST APIs.

1. Setting Up the Server File for endpoint:
Assuming an existing server.js file, we can add mutation logic to handle adding new employees.

type Mutation {
  addEmployee(name: String!, age: Int!): AddEmployeeResponse!
}

This defines a mutation named addEmployee that accepts two arguments (name and age) and returns an AddEmployeeResponse object.

server.js

// GraphQL schema
const typeDefs = gql`
 type Mutation {
   addEmployee(name: String!, age: Int!): AddEmployeeResponse!
 }

 type AddEmployeeResponse {
   employee: Employee!
   message: String!
 }
`;


// Resolvers
const resolvers = {
 Mutation: {
   addEmployee: (_, { name, age }) => {
     const id = String(employees.length + 1);
     const newEmployee = { id, name, age };
     employees.push(newEmployee);
     return {
       employee: newEmployee,
       message: "Employee added successfully!"
     };
   }
 }
};

2. Creating a Form Component:

We’ll create a separate component named AddEmployeeForm.js to handle user input for adding new employees. This component will include name and age input fields along with a submit button.

import React, { useState } from 'react';

function AddEmployeeForm() {
 const [name, setName] = useState('');
 const [age, setAge] = useState(0);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);
 return (
   <div>
     <h2>Add Employee</h2>
     <form style={{display:"flex",justifyContent:"center"}} >
       <div style={{margin:"10px"}}>
         <label>Name:</label>
         <input type="text" value={name} onChange={(e) =>  setName(e.target.value)} />
       </div>
       <div style={{margin:"10px"}}>
         <label>Age:</label>
         <input type="number" value={age} onChange={(e) => setAge(e.target.value)} />
       </div>
       <button type="submit" disabled={loading}>Add Employee</button>
     </form>
     {loading && <p>Loading...</p>}
     {error && <p>Error: {error}</p>}
   </div>
 );
}

export default AddEmployeeForm;

3. Creating a Mutation for Adding Employees details:

To create a mutation for adding employees, we’ll define the request body containing the GraphQL mutation query based on the server’s schema.

const requestBody = {
  query: `
    mutation {
      addEmployee(name: "${name}", age: ${parseInt(age)}) {
        message
      }
    }
  `
};

This mutation uses the name and age state variables from the form and sends them as arguments to the addEmployee mutation.

4. Sending the Mutation Request:

We’ll utilize fetch() to send the mutation request to the server’s GraphQL endpoint (http://localhost:4000/graphql). The request body will include the created mutation query (requestBody).
The response will either indicate success or error message.

try {
   const response = await fetch('http://localhost:4000/graphql', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(requestBody),
   });

   const responseData = await response.json();

   if (response.ok) {
     alert(responseData.data.addEmployee.message);
   } else {
     throw new Error(responseData.errors[0].message);
   }
 } catch (error) {
   setError(error.message);
 } finally {
   setLoading(false);
 }
};

Here’s the complete code for adding the employee details:


import React, { useState } from 'react';

function AddEmployeeForm() {
 const [name, setName] = useState('');
 const [age, setAge] = useState(0);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 const handleSubmit = async (e) => {
   e.preventDefault();
   setLoading(true);
   setError(null);

   const requestBody = {
     query: `
       mutation {
         addEmployee(name: "${name}", age: ${parseInt(age)}) {
           message
         }
       }
     `};

   try {
     const response = await fetch('http://localhost:4000/graphql', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(requestBody),
     });

     const responseData = await response.json();

     if (response.ok) {
       alert(responseData.data.addEmployee.message);
     } else {
       throw new Error(responseData.errors[0].message);
     }
   } catch (error) {
     setError(error.message);
   } finally {
     setLoading(false);
   }
 };

 return (
   <div>
     <h2>Add Employee</h2>
     <form onSubmit={handleSubmit} style={{display:"flex",justifyContent:"center"}} >
       <div style={{margin:"10px"}}>
         <label>Name:</label>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
       </div>
       <div style={{margin:"10px"}}>
         <label>Age:</label>
         <input type="number" value={age} onChange={(e) => setAge(e.target.value)} />
       </div>
       <button type="submit" disabled={loading}>Add Employee</button>
     </form>
     {loading && <p>Loading...</p>}
     {error && <p>Error: {error}</p>}
   </div>
 );
}

export default AddEmployeeForm;

Conclusion

With the above-mentioned steps, you can ensure the seamless integration of GraphQL in React applications. We are sure that you will now have a better idea of React GraphQL integration by using both ApolloClient for streamlined data management and direct GraphQL API integration for more customized needs. Whether you want to integrate GraphQL with React by choosing the convenience of ApolloClient or the flexibility of direct API queries, this guide empowers you with essential aspects of GraphQL integration in React development.

With this comprehensive integration guide, you can confidently implement GraphQL in your React projects, ensuring responsive user experiences and efficient data handling. However, if you seek expert guidance and development support for GraphQL integration in React, partner with a React js development company. Our experts will help you ensure flawless integration and seamless data management, maximizing the potential of your applications.

Frequently Asked Questions (FAQs)

What is the benefit of using GraphQL over REST APIs?

GraphQL offers fine-grained control over data fetching, allowing you to request only the specific fields you need. This eliminates issues like over-fetching and under-fetching data. It also reduces data transfer and improves performance, especially for complex applications with varying UI data requirements. REST APIs, on the other hand, typically return entire datasets, which can lead to unnecessary data transfer. GraphQL’s strongly typed schema offers clear and predictable interactions between the client and server, leading to efficient development and debugging.

Do I need Apollo Client to integrate GraphQL into my React application?

Apollo Client is a popular choice for simplifying the process of integrating GraphWL in React apps due to its powerful features and ease of use. However, it’s possible to interact with GraphQL APIs directly using the fetch API and managing the query logic yourself. This approach requires more manual work but offers more control.

Do I need a backend server to work with GraphQL in React, or can I use mock data for testing purposes?

Having a backend server to work with GraphQL in React is unnecessary. Although a backend server with a GraphQL API is ideal for production applications, you can use mock data for testing and development purposes. Tools like graphql-tools or services like Apollo’s MockedProvider allow you to mock GraphQL responses, enabling front-end development without a live backend. This approach allows you to build and test your React components without depending on a fully functional backend.

Transform Your React Application With GraphQL

Scale up your web application development game with the power and features of GraphQL. Achieve seamless data management and user experience by approaching our skilled experts to integrate GraphQL with React.

Connect Now