Different Ways to Fetch API in ReactJS

Fetching data from an external API is a common task in modern web development. ReactJS provides several ways to fetch data from an API, including using the built-in fetch API, third-party libraries, and GraphQL. In this blog, we will discuss these different ways to fetch data in ReactJS.

1. Using the Built-in Fetch API

The built-in fetch API is a native JavaScript method that can be used to fetch resources from a server. In ReactJS, we can use this method to fetch data from an API by making a GET request to the API endpoint. We can then use the response data to update our state and render the data in our React components.

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

2. Using Third-Party Libraries

There are several third-party libraries available for fetching data from APIs in ReactJS. Some popular options include Axios, SuperAgent, and jQuery. These libraries provide a simplified interface for making API requests and handling the response data. By using a third-party library, we can often reduce the amount of boilerplate code required to fetch data from an API.

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

3. Using GraphQL:

GraphQL is a query language for APIs that provides a more efficient, powerful, and flexible alternative to REST. In ReactJS, we can use GraphQL to fetch data from an API by defining a query in our component and then executing that query using a GraphQL client library. By using GraphQL, we can fetch only the data we need and avoid overfetching or underfetching data.

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_DATA = gql`
  query GetData {
    items {
      id
      title
      description
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_DATA);

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

  return (
    <div>
      {data.items.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}