React Query，提供了一种方便的方式来管理React应用程序中的数据。它是基于Query体系结构，提供了一系列功能强大的工具来处理数据获取、缓存、更新等相关问题。

使用场景：
1.数据获取和管理：通过React Query，您可以轻松地获取和管理应用程序中的数据，不必编写大量的手动逻辑代码。
2.优化性能：React Query提供了许多有用的优化功能，如数据缓存、分页加载、异步数据获取等，可以大大提高应用程序的性能。
3.实时数据更新：React Query还支持实时数据更新，您可以使用它来订阅实时数据更改，以及使用缓存和乐观更新来提高性能和响应速度。
使用示例：

1、基本使用

/* 堆代码 duidaima.com */
import { useQuery } from '@tanstack/react-query';
function App() {
  const { isLoading, error, data } = useQuery('todos', () =>
    fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
      res.json()
    )
  );
  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

这里使用useQuery钩子来获取todos数据。如果数据正在加载，则显示Loading...；如果发生错误，则显示错误消息；否则，显示获取到的数据。

2、使用缓存

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

function App() {
  const [userId, setUserId] = useState(1);
  const { isLoading, error, data } = useQuery(
    ['todos', userId],
    () => fetch(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`).then(res => res.json()),
    { cacheTime: 60000 }
  );

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

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <button onClick={() => setUserId(userId => userId + 1)}>Next user</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

这里使用了带有缓存的useQuery钩子，使用了查询键来表示userId。当用户更改时，数据将从服务器重新获取，并存储在缓存中，以便下一次使用。

3、实时数据更新
这是一个使用 React Query 和 Axios 来实时获取和更新数据的例子。
首先，在 App.js 中，我们导入 useQuery 和 useMutation hooks，以及 axios 库，然后定义一个 fetchUser 函数来获取用户数据：

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

const fetchUser = async () => {
  const res = await axios.get('/api/user');
  return res.data;
}

function App() {
  // useQuery hook to get user data
  const { data: user, isLoading, isError } = useQuery('user', fetchUser);

  // useMutation hook to update user data
  const [updateUser] = useMutation(async (updatedUser) => {
    const res = await axios.put('/api/user', updatedUser);
    return res.data;
  });

  // handler for updating user data
  const handleUpdateUser = (e) => {
    const { name, value } = e.target;
    updateUser({ ...user, [name]: value });
  };

  // render user data and update form
  return (
    <div>
      {isLoading ? (
        <div>Loading...</div>
      ) : isError ? (
        <div>Error loading data.</div>
      ) : (
        <div>
          <h1>User Data</h1>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
          <form>
            <label>
              Name:
              <input type="text" name="name" value={user.name} onChange={handleUpdateUser} />
            </label>
            <label>
              Email:
              <input type="email" name="email" value={user.email} onChange={handleUpdateUser} />
            </label>
          </form>
        </div>
      )}
    </div>
  );
}

然后，我们可以在服务器端创建一个 API 来获取和更新用户数据。这里我们使用 Express.js：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

let user = {
  name: 'John',
  email: 'john@example.com',
};

// GET /api/user route to get user data
app.get('/api/user', (req, res) => {
  res.send(user);
});

// PUT /api/user route to update user data
app.put('/api/user', (req, res) => {
  user = req.body;
  res.send(user);
});

app.listen(5000, () => console.log('Server started on port 5000'));

在这个例子中，我们使用了 useQuery hook 来获取用户数据，并使用 useMutation hook 来更新用户数据。我们还定义了一个 handleUpdateUser 函数，它会在表单数据发生变化时被调用，并通过 updateUser 函数来更新用户数据。当用户数据更新成功后，React Query 会自动更新 user 数据并重新渲染组件，从而实现实时数据更新的效果。

官网：
https://tanstack.com/query/latest/
NPM：https://www.npmjs.com/package/@tanstack/react-query