How to use onSuccess with useQueries in react query ?

在React Query中，useQuery 是一个非常强大的hook，它不仅可以帮助我们异步获取数据，还可以处理缓存、重试以及数据更新等问题。onSuccess 是 useQuery 的一个选项，当请求成功后，它会被触发。我们可以利用 onSuccess 做很多事情，比如数据获取成功后触发提示、执行数据后处理、更新其他组件的状态等。

使用方式：

在 useQuery 中使用 onSuccess 通常是这样的：

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

function fetchProjects() {
  return fetch('/api/projects').then(res => res.json());
}

function MyApp() {
  const { data, isError, error } = useQuery('projects', fetchProjects, {
    onSuccess: (data) => {
      console.log('数据请求成功，这里是请求到的数据:', data);
      // 这里可以做一些例如数据转换、触发通知或更新其他状态的操作
    }
  });

  if (isError) return <div>请求出错: {error.message}</div>;

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

示例说明：

在上述代码中，我们定义了 fetchProjects 函数用于获取数据，并将其传递给 useQuery。在 useQuery 的第三个参数中，我们设置了 onSuccess 回调函数。每当 fetchProjects 成功获取数据，onSuccess 将被执行。在这个回调中，我们可以执行如日志记录、数据格式化或状态更新等操作。

高级应用：

我们也可以用 onSuccess 来触发其他查询的更新或重置。比如，假设我们有一个项目列表和项目详情的查询，当用户添加新项目后，我们可能希望重新获取项目列表，确保列表数据是最新的。这可以通过 QueryClient 来实现:

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

function useAddProject() {
  const queryClient = useQueryClient();

  const addProject = (newProject) => {
    return fetch('/api/projects', {
      method: 'POST',
      body: JSON.stringify(newProject),
    }).then(res => {
      // 在添加项目后，重新获取项目列表
      queryClient.invalidateQueries('projects');
    });
  };

  return addProject;
}

在这个例子中，每当添加新项目后，我们通过调用 invalidateQueries 方法使得名为 projects 的查询标记为无效。React Query 将会重新获取项目列表，确保用户看到的是最新的数据。

总结：

onSuccess 在React Query中提供了一个非常有用的接口，使我们能够在数据请求成功后执行特定的操作，从而提高应用程序的交互性和用户体验。通过结合 QueryClient 的方法，我们可以轻松实现数据之间的依赖和更新，使数据状态管理更加高效和简洁。