Mastering APIs in ReactJS: Using Custom React Query, Axios, and Handling Race Conditions like a Pro

Handling APIs in Reactjs is a crucial part of building modern web applications. In this tutorial, we will dive deep into handling APIs like a pro in Reactjs using custom react query, Axios, and dealing with race conditions.

Setting up the project

To get started, let’s create a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app react-api-tutorial

After the project is initialized, navigate to the project directory and install Axios and react-query:

cd react-api-tutorial
npm install axios react-query

Now that we have all the necessary packages installed, we can start working on our API handling logic.

Custom React Query

React Query is a powerful library that provides a set of hooks for fetching, caching, and updating data from APIs. We will create a custom hook using React Query to handle our API requests.

Create a new file called useApi.js inside the src directory and add the following code:

import { useQuery, useMutation } from "react-query";
import axios from "axios";

export function useApi() {
  const fetchData = async () => {
    const { data } = await axios.get("https://api.example.com/data");
    return data;
  };

  const postData = async (payload) => {
    const { data } = await axios.post("https:api.example.com/create", payload);
    return data;
  };

  const { data: fetchedData } = useQuery("data", fetchData);

  const mutation = useMutation(postData);

  return {
    fetchedData,
    postData: mutation.mutate,
    isLoading: mutation.isLoading,
  };
}

In this custom hook, we define two functions fetchData and postData to handle GET and POST requests respectively. We use useQuery to fetch data and useMutation to post data to the API.

Using the custom hook

Now that we have our custom hook ready, let’s use it in our component. Create a new file called App.js inside the src directory and add the following code:

import React from "react";
import { useApi } from "./useApi";

function App() {
  const { fetchedData, postData, isLoading } = useApi();

  const handlePostData = () => {
    postData({ name: "John Doe", email: "johndoe@example.com" });
  };

  return (
    <div>
      {isLoading && <p>Loading...</p>}

      {fetchedData && <p>{JSON.stringify(fetchedData)}</p>}

      <button onClick={handlePostData}>Post Data</button>
    </div>
  );
}

export default App;

In this component, we use our custom hook to fetch data and post new data to the API. We display the fetched data and provide a button to trigger the post request.

Dealing with race conditions

One common issue when handling APIs in React is dealing with race conditions, where multiple API requests are made concurrently and create conflicts in data updating.

React Query provides built-in mechanisms to handle race conditions using options like staleTime, refetchOnWindowFocus, and refetchOnReconnect. You can configure these options in the query/mutation hooks according to your requirements.

Conclusion

In this tutorial, we learned how to handle APIs like a pro in Reactjs using custom react query, Axios, and deal with race conditions. By creating a custom hook with React Query, we can efficiently fetch and post data from APIs in our React applications. Remember to handle race conditions by configuring the appropriate options in the query/mutation hooks.

I hope this tutorial was helpful and provided valuable insights into handling APIs in Reactjs. Happy coding!