What is React Query ?

What is React Query?

React Query is a JavaScript library that simplifies data fetching and management in React applications. Developed by Tanner Linsley, React Query provides a declarative and efficient approach to handling asynchronous data, abstracting away the complexities of network requests, caching, and state synchronization. By leveraging React Query, developers can focus on building features rather than dealing with boilerplate code and intricate data management logic.

Key Features of React Query:

1. Automatic Caching: React Query automatically caches API responses, reducing unnecessary network requests and improving performance.
2. Query Invalidation and Refetching: It offers built-in mechanisms for invalidating stale data and refetching when needed, ensuring that applications always display the latest data.
3. Loading States and Error Handling: React Query handles loading states and error handling out of the box, simplifying the management of asynchronous operations.
4. Optimistic Updates: It supports optimistic updates, enabling developers to update the UI optimistically while waiting for server responses.
5. Server-Side Rendering (SSR) Support: React Query seamlessly integrates with server-side rendering, facilitating efficient data fetching on both client and server.

How to Use React Query for Data Fetching and Management

React Query simplifies the process of data fetching and management in React applications. Let's dive deeper into how to use React Query for fetching data, posting data, deleting data, and updating the UI accordingly.

First, let's create a file named api.js where we define the API methods:

import axios from 'axios';

export const fetchPosts = async () => {
  const response = await axios.get('/api/posts');
  return response.data;
};

export const deletePost = async (postId) => {
  await axios.delete(`/api/posts/${postId}`);
};

export const addPost = async (newPost) => {
  await axios.post('/api/posts', newPost);
};

1. Fetching Data

Fetching data with React Query is straightforward. You can use the useQuery hook to fetch data from an API endpoint. Here's an example:

import { useQuery } from 'react-query';
import axios from 'axios';
import { fetchPosts } from './api';

function Posts() {
  const { data, isLoading, isError } = useQuery('posts', fetchPosts);


  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error fetching data</div>;


  return (
    <div>
      {data.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

In this example, useQuery fetches the data using the fetchPosts function. It handles loading and error states automatically.

2. Posting Data

To post data using React Query, you can use the useMutation hook. Here's an example of posting a new post:

import { useMutation } from 'react-query';
import axios from 'axios';
import { addPost } from './api';

function PostForm() {
  const addPostMutation = useMutation(addPost(newPost));


  const handleSubmit = async (e) => {
    e.preventDefault();
    const newPost = { title: 'New Post', body: 'Lorem ipsum' };
    await addPostMutation.mutateAsync(newPost);
  };


  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Add Post</button>
    </form>
  );
}

In this example, useMutation is used to handle the post request. The mutateAsync function triggers the mutation, and you can handle the result accordingly.

3. Deleting Data

Deleting data is similar to posting data. You can use the useMutation hook to handle delete requests. Here's an example of deleting a post:

import { useMutation } from 'react-query';
import axios from 'axios';
import { deletePost } from './api';

function Post({ post }) {
  const deletePostMutation = useMutation(deletePost(post.id));

  const handleDelete = async () => {
    await deletePostMutation.mutateAsync();
  };

  return (
    <div>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

In this example, useMutation is used to handle the delete request. The mutateAsync function triggers the mutation, and you can handle the result accordingly.

4. Fetching New Data After Mutations

After performing mutations (posting, deleting, etc.), you may want to refetch the data to display the updated state. React Query provides a built-in mechanism for this. You can use the refetch function returned by useQuery after mutations are performed. Here's how:

import React from 'react';
import { useQuery } from 'react-query';
import { fetchPosts, deletePost } from './api'; // Import API methods

function Posts() {
  const { data, isLoading, isError, refetch } = useQuery('posts', fetchPosts);


  const handleDelete = async (postId) => {
    await deletePost(postId);
    refetch();
  };

  return (
    <div>
      {isLoading && <div>Loading...</div>}
      {isError && <div>Error fetching data</div>}
      {data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
          <button onClick={() => handleDelete(post.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default Posts;

In this example, after deleting a post, the refetch function is called to fetch the updated list of posts from the server.

By following these steps, you can effectively use React Query to manage data fetching, posting, deleting, and updating the UI in your React applications. Its simplicity and powerful features make it a valuable tool for building modern web applications.

React Query vs. Redux:

While both React Query and Redux address state management in React applications, they serve different purposes:

• React Query focuses on managing remote data fetching and caching, simplifying asynchronous data handling and reducing boilerplate code.
• Redux is a state management library for managing the entire application state, providing a centralized store for data and enabling predictable state mutations through actions and reducers.

Conclusion:

React Query represents a paradigm shift in data fetching and management in React applications. Its simplicity, efficiency, and powerful features make it a compelling choice for modern web development projects. By incorporating React Query into your applications, you can streamline data handling, improve performance, and build more maintainable and scalable applications. Whether you're fetching data, posting updates, or managing complex state, React Query empowers you to deliver exceptional user experiences with ease.