useMutation

useMutation

用于在 React 组件中执行变异的 Hook。

import type {FeedbackLikeMutation} from 'FeedbackLikeMutation.graphql';
const React = require('React');

const {graphql, useMutation} = require('react-relay');

function LikeButton() {
  const [commit, isInFlight] = useMutation<FeedbackLikeMutation>(graphql`
    mutation FeedbackLikeMutation($input: FeedbackLikeData!) {
      feedback_like(data: $input) {
        feedback {
          id
          viewer_does_like
          like_count
        }
      }
    }
  `);

  if (isInFlight) {
    return <Spinner />;
  }

  return (
    <button
      onClick={() => {
        commit({
          variables: {
            input: {
              id: '123',
              text: 'text',
            },
          },
          onCompleted(data) {
            console.log(data);
          },
        });
      }}
    />
  );
}

参数

• mutation：使用 graphql 模板字面量指定的 GraphQL 变异。

• commitMutationFn：<T: MutationParameters>(IEnvironment, MutationConfig<T>): Disposable。[可选] 与 commitMutation 具有相同签名的函数，将代替其调用。默认为 commitMutation。

返回值

包含以下值的元组

• [0] commitMutation：将执行变异的函数
  • 参数，语法签名与我们的 commitMutation API 几乎相同
    • variables：包含变异所需的变量的对象。例如，如果变异定义了一个 $input 变量，则此对象应包含一个 input 键，其形状必须与 GraphQL 模式定义的变异所期望的数据形状匹配。
    • onCompleted：当请求完成并且内存中 Relay 存储通过 updater 函数更新时执行的回调函数。接收一个 response 对象，它是“原始”服务器响应。在内部，errors 不允许，CRITICAL 错误将在 onError 处理程序中抛出。
    • onError：如果 Relay 在请求期间遇到错误，则执行的回调函数。在内部，CRITICAL 错误在服务器上读取变异结果期间。
    • optimisticResponse：包含用于乐观地更新本地内存中存储的数据的对象，即立即在变异请求完成之前。此对象必须与 GraphQL 模式定义的变异的响应类型具有相同的形状。如果提供，Relay 将使用 optimisticResponse 数据来更新本地数据存储中相关记录上的字段，在 optimisticUpdater 执行之前。如果变异请求期间发生错误，则乐观更新将被回滚。
    • optimisticUpdater：用于乐观地更新本地内存中存储的数据的函数，即立即在变异请求完成之前。如果变异请求期间发生错误，则乐观更新将被回滚。此函数接收一个 store，它是内存中 Relay 存储 的代理。在此函数中，客户端定义了如何通过 store 实例更新本地数据。有关如何使用 store 的详细信息，请参阅我们的 Relay 存储 API 参考。请注意
      • 通常最好只传递 optimisticResponse 选项，而不是 optimisticUpdater，除非您需要对本地记录执行比仅更新字段更复杂的更新（例如删除记录或将项目添加到集合中）。
      • 如果您确实决定使用 optimisticUpdater，通常它可以与 updater 相同。
    • updater：用于根据变异的真实服务器响应更新本地内存中存储的函数。如果未提供 updater，默认情况下，Relay 将知道自动更新变异响应中引用的记录上的字段；但是，如果您需要进行比仅更新字段更复杂的更新（例如删除记录或将项目添加到集合中），则应该传递一个 updater。当服务器响应返回时，Relay 首先会恢复 optimisticUpdater 或 optimisticResponse 引入的任何更改，然后执行 updater。此函数接收一个 store，它是内存中 Relay 存储 的代理。在此函数中，客户端定义了如何根据服务器响应通过 store 实例更新本地数据。有关如何使用 store 的详细信息，请参阅我们的 Relay 存储 API
    • uploadables：可选的上传文件映射，一个表示任意数量可上传项目的对象，每个项目一个键。每个值必须是 File 或 Blob 类型。
    • 无环境参数：useMutation 将自动使用由 RelayEnvironmentProvider 提供的当前环境
  • 返回值
    • disposable：包含 dispose 函数的对象。调用 disposable.dispose() 将恢复乐观更新，Relay 不会更新存储或调用任何成功/错误回调，但不能保证网络请求被取消。如果在变异成功后调用 dispose，它将不会回滚 Relay 存储中的更新。
• [1] areMutationsInFlight：如果通过调用 commitMutation 触发的任何变异仍在进行中，则为 true。如果您多次调用 commitMutation，则一次可能有多个变异正在进行中。

---

此页面是否有用？

通过 回答几个快速问题.