How to wait for response from mutation and pass it to another one?

在使用 React Query 进行数据处理时，经常会遇到需要依赖某个 mutation 返回结果来执行另一个 mutation 的场景。这通常涉及到链式异步操作，React Query 提供了优雅的解决方案来处理这类问题。

步骤1：使用 useMutation 定义 Mutation

首先，你需要使用 useMutation 钩子来定义每一个 mutation。例如，假设有两个 API 请求：createUser 和 sendWelcomeEmail，其中 sendWelcomeEmail 需要依赖 createUser 的结果。

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

const createUser = async (userData) => {
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(userData),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  if (!response.ok) {
    throw new Error('Error creating user');
  }
  return response.json();
};

const sendWelcomeEmail = async (userId) => {
  const response = await fetch(`/api/users/${userId}/send-email`, {
    method: 'POST',
  });
  if (!response.ok) {
    throw new Error('Error sending email');
  }
  return response.json();
};

const createUserMutation = useMutation(createUser);
const sendEmailMutation = useMutation(sendWelcomeEmail);

步骤2：链式调用 Mutation

接下来，你可以在 createUserMutation 的 onSuccess 回调中调用 sendEmailMutation.mutate 方法。onSuccess 会在第一个 mutation 成功完成后触发，可以确保传递正确的数据给第二个 mutation。

javascript
createUserMutation.mutate(userData, {
  onSuccess: (data) => {
    // data 是 createUser 返回的用户数据，我们假设它包含了 userId
    sendEmailMutation.mutate(data.userId);
  },
});

示例：创建用户并发送欢迎邮件

以下是一个整合了上述步骤的组件示例：

javascript
import React from 'react';
import { useMutation } from 'react-query';

function CreateUserComponent() {
  const createUserMutation = useMutation(createUser);
  const sendEmailMutation = useMutation(sendWelcomeEmail);

  const handleCreateUser = async (userData) => {
    createUserMutation.mutate(userData, {
      onSuccess: (data) => {
        sendEmailMutation.mutate(data.userId);
      },
    });
  };

  return (
    <div>
      <button onClick={() => handleCreateUser({ name: 'Alice', email: 'alice@example.com' })}>
        Create User and Send Email
      </button>
    </div>
  );
}

在这个例子中，当用户点击按钮时，handleCreateUser 函数会被触发，执行创建用户的操作，成功后会使用新用户的 ID 执行发送欢迎邮件的操作。通过这种方式，我们可以确保操作的顺序性和依赖性，而且代码结构清晰，易于维护。

总结

使用 React Query 的 useMutation 配合 onSuccess 回调，可以有效地管理多个依赖的异步操作，确保它们按正确的顺序执行，并处理好它们之间的数据依赖。这样的处理模式不仅使得代码易于理解和维护，还可以优化用户体验和应用性能。