How to Handle React Query Success Response in React JS

Last Updated on March 4, 2024 by Digamber in React JS

React Query is developed for web developers keeping flexibility in mind. Communication with the server is essential in building web and mobile applications.

The ideal approach is to request the server with REST API; then, the server returns success, error, or the data in response.

In this tutorial, you will learn how to make a request to the server and handle the success and error responses after receiving the server response in React js using the React Query and Bootstrap packages.

We show you how to build a React app from scratch. How to create function component.

How to efficiently set up React query in React and send a request to the server and receive the success and data response in React environment.

React Query Show Success Response Message with Bootstrap Example

• Step 1: Create React Project
• Step 2: Install React Query and Axios Modules
• Step 3: Setting Up Bootstrap
• Step 4: Register React-Query in React
• Step 5: Build Function Component
• Step 6: Handle Success and Error Responses
• Step 7: Update Global Component
• Step 8: View App on Browser

Create React Project

In the first step, we are going to generate a brand new React app.

If you haven’t created the project yet, go ahead and invoke the following command from your terminal.

npx create-react-app react-blog-app

You have to get into the application’s root with the given command.

cd react-blog-app

Install React Query and Axios Modules

In order to handle the success response make sure to install react-query and axios libraries using the following command.

npm install @tanstack/react-query axios --legacy-peer-deps

Setting Up Bootstrap

Next, In this step we are going to add bootstrap module in our react app; you need to use the following command to install the module.

npm i bootstrap --legacy-peer-deps

Open the src/App.js file, here you have to import the bootstrap library in the global component file.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

function App() {
  return <div></div>;
}

export default App;

You now have the access to all the bootstrap UI components, it will even help you to create the basic web site layout in React.

Register React-Query in React

We had already import the React query library, now to get access to react-query hooks, make sure to add the QueryClientProvider and QueryClient modules in the App.js file.

Not just that, but also wrap the app component with the react-query services.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// Create a client
const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Build Function Component

Look for the src/folder, here in this folder, you need to make the components/ folder, within the folder also create the Users.js file.

import React from 'react'

function Users() {
  return (
    <div>Users page</div>
  )
}

export default Users

Handle Success and Error Responses

In this step, we will make the get request to retrieve the data from the server. This request returns the response either it will be success or error.

We are using the bootstrap alert module to show the success and error messages.

Update the code into the components/Users.js file.

import React from "react";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";

async function fetchData() {
  const { data } = await axios.get(
    "https://jsonplaceholder.typicode.com/users"
  );
  return data;
}

function Users() {
  const { isSuccess, isLoading, isError, error, data } = useQuery(
    ["users"],
    fetchData
  );

  if (isLoading) {
    return <div className="alert alert-warning">Loading ...</div>;
  }
  if (isSuccess) {
    return <div className="alert alert-success">Data Received</div>;
  }
  if (isError) {
    return (
      <div>
        <div className="alert alert-danger">{error.message}</div>
      </div>
    );
  }

  return (
    <ul className="list-group">
      {data.map((res, index) => {
        return (
          <li className="list-group-item mb-3" key={index}>
            <h3>{res.username}</h3>
            <p>{res.email}</p>
          </li>
        );
      })}
    </ul>
  );
}

export default Users;

Update Global Component

The global component serves all the component in React, therefore we have to make sure and register the Users component into the App.js file.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Users from "./components/Users";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Query Handling Success Response Example</h2>
      <Users />
    </div>
  );
}

export default App;

View App on Browser

We are almost done with the coding part, the last thing is to run the react server. Here is the command that will help you start the react app.

You can view the app on the browser with the given url.

npm start

http://localhost:3000

Conclusion

React Query is a great tool for retrieving and posting data to the server.

It not just gives a facile system to communicate with the server but also gives us extreme freedom to handle the server response, such as success, error, and data.

In this tutorial, we have learned how to display a success message after the request is successful in React JS app.

We learned how to use the React query useQuery hook and the Bootstrap CSS library.