Apollo 入门指南（八）：如何通过变更修改数据

2023-12-08 17:21:53

使用 Apollo Mutation 赋能 React 应用的数据修改功能

前言

在构建数据驱动的 React 应用时，我们经常需要修改后端数据库中的数据。Apollo Client 提供了 useMutation hook，它为 React 组件提供了优雅的方式来实现数据修改功能。本文将深入探讨如何使用 useMutation 来修改数据、优化用户体验，以及解决潜在的问题。

设置 Mutation

useMutation hook 接受两个参数：

Mutation 函数： 该函数负责将修改的数据发送到服务器，并返回一个包含服务器响应的 Promise。
Mutation 选项： 该对象允许配置变更的各种行为，例如乐观更新和错误处理。

以下是一个示例，展示如何在 React 组件中设置 mutation：

import { useMutation } from "@apollo/client";

const MyComponent = () => {
  const [updateTask, { loading, error }] = useMutation(UPDATE_TASK_MUTATION, {
    optimisticResponse: {
      __typename: "Mutation",
      updateTask: {
        __typename: "Task",
        id: "1",
        title: "New Title",
        completed: false,
      },
    },
  });

  const handleUpdateTask = () => {
    updateTask({ variables: { id: "1", title: "New Title" } });
  };

  return (
    <div>
      <button onClick={handleUpdateTask}>Update Task</button>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们创建了一个 useMutation hook，它接受 UPDATE_TASK_MUTATION 函数和一个包含 optimisticResponse 选项的选项对象。optimisticResponse 指定了在服务器确认更改之前在客户端缓存中进行的乐观更新。

处理服务器端和客户端更新

当执行 mutation 时，Apollo 首先会在客户端执行乐观更新，立即更新本地缓存，即使服务器尚未确认更改。这有助于提升用户体验，因为它允许用户立即看到他们的更改，而无需等待服务器响应。

一旦服务器确认了更改，Apollo 就会用服务器端数据替换客户端缓存中的数据。如果服务器端更新与客户端更新不同，Apollo 会触发一个 __typename 为 Mutation 的查询，其中包含服务器端更新的数据。

利用乐观更新优化用户体验

乐观更新可以显著提高用户体验，因为它允许用户立即看到他们的更改，而无需等待服务器响应。然而，在某些情况下，乐观更新可能会导致数据不一致，例如当多个用户同时修改同一数据时。

为了解决这个问题，Apollo 提供了一个名为 refetchQueries 的选项，它允许我们在 mutation 成功后重新获取某些查询。这确保了客户端缓存中的数据始终与服务器端的数据保持一致。

以下是一个示例，展示如何在 mutation 选项中使用 refetchQueries 选项：

const MyComponent = () => {
  const [updateTask, { loading, error }] = useMutation(UPDATE_TASK_MUTATION, {
    refetchQueries: ["TaskList"],
  });

  const handleUpdateTask = () => {
    updateTask({ variables: { id: "1", title: "New Title" } });
  };

  return (
    <div>
      <button onClick={handleUpdateTask}>Update Task</button>
    </div>
  );
};

export default MyComponent;