How to Fetch Data in React Query Like A Pro

Introduction

In React apps, fetching data from APIs is a common requirement.

React Query is a powerful library that provides an elegant and efficient way to handle data fetching, caching, and synchronization in your React components.

In this article, we'll explore how to use React Query to fetch data from the Marvel API and render it in our React application.

Prerequisites

Before we proceed, make sure you have a basic understanding of React and JavaScript. Familiarity with asynchronous operations and RESTful APIs will also be beneficial.

Check out the https://developer.marvel.com/docs first to understand how to make Get requests from Marvel API docs on Swagger.

Fetching Data with React Query

To fetch data from Marvel API, we'll first create a function getComicsById using Axios to make a GET request.

This function retrieves comic data based on the provided comicId. We'll also define a custom hook useComicsById that utilizes React Query's useQuery hook.

import axios from "axios";
import { base_url, key, hash } from "./..";
import { useQuery } from "react-query";

async function getComicsById(comicId: number) {
  const { data } = await axios.get(`${base_url}/comics/${comicId}`, {
    params: {
      ts: "1",
      apikey: key,
      hash: hash,
    },
  });
  return data;
}

export function useComicsById(comicId: number) {
  return useQuery(["comic by id", comicId], () => getComicsById(comicId));
};

In the code above, we import Axios and necessary configuration variables. The getComicsById function performs the API call using axios.get() and returns the retrieved data. It includes the necessary parameters such as ts, apikey, and hash required by the Marvel API.

The useComicsById hook utilizes React Query's useQuery hook to handle the data fetching.

It takes comicId as an argument and uses it to generate a unique query key. The second argument of useQuery is an asynchronous function that calls getComicsById with the provided comicId.

React Query manages the caching, automatic refetching, and error handling for us.

Rendering the Fetched Data

To render the fetched data, we import the useComicsById hook into the ComicDetailsList component. In this component, we use Next.js useRouter hook to obtain the comicId from the URL.

We then use the useComicsById hook to fetch the data based on the comicId.

import { useRouter } from "next/router";
import { useComicsById } from "@features/comics/api";
import { ComicDetailsById } from "./..";


export function ComicDetailsList() {
  const router = useRouter();
  const { comicId } = router.query;
  const { data, isLoading, isError } =useComicsById(Number(comicId));
  const { results } = data?.data || {};


  if (isLoading) //...
  if (isError)//...


  return (
    <>
      {results?.map((comic: any) => (
        <ComicDetailsById
          key={comic.id}
          {...comic}

        />
      ))}

      //rest of the code...
    </>
  );
}

In the ComicDetailsList component, we destructure the data, isLoading, and isError properties from the result of the useComicsById hook. We also destructure the results from the data object.

Based on the loading and error states, we conditionally render different components.

Once the data is successfully fetched, we iterate over the results array using the map() function and render a ComicDetailsById component for each comic.

We pass the necessary props to the ComicDetailsById component, such as the key and the spread operator ({...comic}) to pass all the properties of the comic as individual props.

Conclusion

In this article, we learned how to use React Query to fetch data from the Marvel API in a React application. We refactored the code to utilize React Query's useQuery hook for data fetching and caching. By separating the data fetching logic into a custom hook, we kept the component clean and focused on rendering the data.

React Query provides additional features like caching, automatic refetching, and error handling out of the box, making it a powerful tool for handling data in React applications. Consider using React Query for your data fetching needs to improve the performance and maintainability of your React components.

Happy fetching!

Hope this helps!