How to manage global states with React Query

React Query is fundamentally a library for data fetching, caching, and synchronization, but it can also be used for simple global state management. Although React Query is not specifically designed for global state management (compared to Redux, MobX, or React Context), it provides features that simplify managing global state, particularly when these states are tied to data fetching operations.

1. Install and Set Up React Query

First, install React Query in your React project.

bash
npm install react-query

Then, set up QueryClient and QueryClientProvider in your application's top-level component:

javascript
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

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

2. Manage Data with useQuery or useMutation

Suppose you want to globally manage user information; you can use useQuery to fetch and cache this data:

javascript
import { useQuery } from 'react-query';

function UserInfo() {
  const { data: user, isLoading } = useQuery('user', fetchUser);

  if (isLoading) return 'Loading...';

  return (
    <div>
      <h1>{user.name}</h1>
      {/* Display other user information */}
    </div>
  );
}

Here, fetchUser is a function responsible for retrieving user data from the backend API. React Query automatically handles caching and background refetching.

3. Manage State Changes with useMutation

If you need to perform operations that modify server data (e.g., updating user information), use useMutation:

javascript
import { useMutation, useQueryClient } from 'react-query';

function UpdateUserForm({ user }) {
  const queryClient = useQueryClient();
  const { mutate } = useMutation(updateUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('user');
    },
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newUser = { id: user.id, name: formData.get('name') };
    mutate(newUser);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" defaultValue={user.name} />
      <button type="submit">Update</button>
    </form>
  );
}

In this example, updateUser is a function that sends an update request to the server. The onSuccess option of useMutation triggers a callback after the operation succeeds; here, we call queryClient.invalidateQueries('user') to ensure the user information query is updated, reflecting the latest state.

Summary

Although React Query is not traditionally a global state management tool, its data caching and synchronization capabilities make it effective for managing global state related to remote data interactions. Additionally, by properly utilizing useQuery and useMutation, we can achieve global state management with automatic updates, simplifying state sharing between components and maintaining data consistency.