Understanding React Query Data Fetching Easy

React Query is a popular library that helps manage data fetching in React applications. It makes it easier to get data from a server .React Query, now part of the TanStack library, is a powerful tool that simplifies managing server-state in your React applications. It provides a comprehensive set of features for fetching, caching, synchronizing, and updating data, ensuring your app remains responsive and up-to-date

What is React Query?

React Query is a tool for React developers that simplifies the process of getting data from a server, caching it, and keeping it synchronized. It removes a lot of the repetitive and complex code that usually comes with data fetching.

Demo

Key Features

1. Declarative Data Fetching: React Query uses hooks like useQuery to fetch data declaratively.
2. Automatic Caching: It caches data automatically, reducing redundant requests and improving performance.
3. Background Synchronization: Keeps data fresh by refetching in the background.
4. Optimistic Updates: Provides instant UI feedback during data mutations.
5. Error Handling: Simplifies error management with built-in retry logic.

How React Query Works

1. Setup:
   • You create a QueryClient and provide it to your app using QueryClientProvider. This initializes React Query in your app.
2. Fetching Data:
   • You use the useQuery hook to fetch data.
   • useQuery requires a unique key (like an ID for the data) and a function that fetches the data (e.g., a function making a fetch request to an API).
3. Automatic State Management:
   • useQuery automatically handles different states for you:
     • Loading: When the data is being fetched.
     • Error: If there’s an error while fetching data.
     • Success: When the data is successfully fetched.
4. Caching:
   • React Query caches the data it fetches. If you request the same data again, it can serve it from the cache, making your app faster and reducing unnecessary network requests.
5. Automatic Refetching:
   • React Query can automatically refetch data when certain events happen, like when the window is refocused, the network reconnects, or a certain time has passed.

Installation

Install React Query in your project:

npm install @tanstack/react-query

Setting Up

Set up QueryClient and QueryClientProvider at the root of your application:

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your application components */}
    </QueryClientProvider>
  );
}

export default App;

Fetching Data with useQuery

The useQuery hook is used for fetching data:

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

const fetchUsers = async () => {
  const { data } = await axios.get('/api/users');
  return data;
};

function Users() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

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

Mutating Data with useMutation

The useMutation hook is used for modifying data:

import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

const addUser = async (user) => {
const { data } = await axios.post('/api/users', user);
return data;
};

function AddUserForm() {
const queryClient = useQueryClient();
const mutation = useMutation(addUser, {
onSuccess: () => {
queryClient.invalidateQueries('users');
},
});

const handleSubmit = (event) => {
event.preventDefault();
const user = { name: event.target.elements.name.value };
mutation.mutate(user);
};

return (
Add User
);
}

What is the difference between react query and Axios?

Is react Query better than Redux?

React Query and Redux serve different purposes, so whether one is “better” than the other depends on the specific needs of your application. Here’s a concise comparison to help you decide which one to use:

Purpose and Use Cases

• React Query:
  • Designed for managing server state (data fetched from APIs).
  • Automatically handles caching, background updates, and synchronization of server data.
  • Best for applications with complex data-fetching requirements and where you want automatic state updates from server data.
• Redux:
  • General-purpose state management library.
  • Manages global application state (not limited to server state).
  • Suitable for applications with complex client-side state that needs to be shared across multiple components.

Key Differences

When to Use Each

• Use React Query if:
  • Your primary need is to fetch and manage server state.
  • You want automatic data synchronization, caching, and background updates.
  • You prefer a solution with minimal boilerplate for data fetching.
• Use Redux if:
  • You need a centralized store for global state management across your application.
  • Your application has complex client-side state that is not just limited to server data.
  • You need fine-grained control over state changes and complex state logic.

Combined Use

You can use both React Query and Redux in the same application:

• Use React Query for server state management (data fetching and caching).
• Use Redux for global client-side state management (UI state, authentication state, etc.).

React Query and Redux are not direct competitors but are complementary tools. Choosing the right tool depends on your application’s specific requirements:

Conclusion

React Query streamlines the complexities of data fetching and updating in React applications, making it easier to manage server-state. By using React Query, developers can focus more on building features and less on handling data synchronization and state management.