8. useMutation 挂钩
3m
你现在使用的是此课程的较旧版本。 查看课程变更日志.

💻 客户端中的突变

在 Explorer 中玩耍很有趣，但我们需要运行来自我们应用程序中用户输入。因此，让我们转到客户端环境并使用新的挂钩发送我们的突变！

我们希望在我们从主页导航到跟踪页之前更新观看次数。此导航发生在我们的TrackCard组件内。

在 client/src/containers文件夹内，让我们打开 track-card.js文件。

首先，让我们开始从 @apollo/client 包中导入。我们需要 gql，因为我们将使用相同的字符串模板文字用于我们的 ，并且我们需要 useMutation 钩子将我们的 发送至服务器。

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

接下来，让我们创建新的 ，该变量用于保存我们的 ，将其命名为 INCREMENT_TRACK_VIEWS，并将其设置为 gql 模板文字，并添加反引号 (`)。在反引号内，我们将粘贴 ，我们之前在 Studio 中已生成该 ，并添加一条注释来说明该 的作用。

/**
 * Mutation to increment a track's number of views
 */
const INCREMENT_TRACK_VIEWS = gql`
  mutation IncrementTrackViews($incrementTrackViewsId: ID!) {
    incrementTrackViews(id: $incrementTrackViewsId) {
      code
      success
      message
      track {
        id
        numberOfViews
      }
    }
  }
`;

🎣 useMutation 钩子

由于这是一个 ，而不是一个 ，因此我们不会使用 useQuery 我们熟悉的钩子。相反，我们将切换到 useMutation 钩子。

在 TrackCard 组件中，我们将首先调用该钩子。它采用我们之前设置的 ， INCREMENT_TRACK_VIEWS，作为第一个参数。

第二个参数是一个带有 variables 键的对象。此处，我们将添加 incrementTrackViewsId 并将其设定为我们准备导航到的轨道的 id。这个 id 已从 track 道具中为我们解构。

useMutation(INCREMENT_TRACK_VIEWS, {
  variables: { incrementTrackViewsId: id },
});

现在，有趣的地方来了：与 useQuery 不同，调用 useMutation 实际上不会自动执行 ！

相反， useMutation 钩子返回一个包含两个元素的数组，我们此处开始将其解构。

const [incrementTrackViews] = useMutation(INCREMENT_TRACK_VIEWS, {
  variables: { incrementTrackViewsId: id },
});

第一个元素是 突变函数，稍后我们将使用该函数来实际运行 。我们将其称为 incrementTrackViews。第二个元素是一个关于 的信息的对象： loading、 error 和 data。此组件不需要它，因此我们不必提取它。

👆🏽设置 onClick

我们何时想要运行我们的突变函数？当用户点击卡时！

我们向 CardContainer 组件添加一个 onClick 道具，并将其配置为调用我们的突变函数 incrementTrackViews。

<CardContainer
  to={`/track/${id}`}
  onClick={incrementTrackViews}
>
在客户端发送突变
我们使用钩子从 React 客户端向我们的 GraphQL API 发送请求。若要发送突变，我们使用
 
 钩子。该钩子返回一个 
 
，其中第一个元素是
 
 ，用于触发突变。第二个元素是一个对象，其中包含有关突变的更多信息，例如 loading、error 和 
 
。此钩子采用一个
 
 作为第一个参数。它还接收一个 
 
对象作为第二个参数，其中设置了类似 的属性
 
。

将项目从此方框拖拽到上面的空白处

  • 数组

  • 值

  • 变量

  • 整数

  • 参数

  • 变异函数

  • GraphQL 操作

  • useGqlQuery

  • 选项

  • useQuery

  • useMutation

  • 数据

以下哪项是 useQuery 和 useMutation 钩子之间的区别？

1️⃣ 还有最后一件事…

还有一件事，让我们添加一个控制台日志，以便在突变完成后检查它。

为此，让我们回到设置 useMutation 钩子的地方，并在 options 对象中再添加一个属性。 onCompleted 属性是一个回调函数，当 成功完成时它将运行，并且它可以访问返回的响应。我们将日志记录响应到浏览器控制台。

const [incrementTrackViews] = useMutation(INCREMENT_TRACK_VIEWS, {
  variables: { incrementTrackViewsId: id },
  // to observe what the mutation response returns
  onCompleted: (data) => {
    console.log(data);
  },
});

我们的客户端应用程序已准备好向服务器发送此 ！让我们看看如何在上一课中完成我们的旅程！

代码挑战！

使用 useMutation 挂钩将 ASSIGN_SPACESHIP_MUTATION 突变发送到服务器。它需要两个变量：spaceshipId 和 missionId。解构 mutate 函数（称之为 assignSpaceship），以及挂钩返回数组的 loading、error 和 data 属性。

上一步

分享您对此课程的问题和意见

您的反馈有助于我们改进！如果您遇到困难或困惑，请告知我们，我们会帮助您。所有评论都是公开的，并且必须遵守 Apollo 行为准则。请注意，已解决或处理的评论可能会被移除。

您需要一个 GitHub 账户才能发布以下内容。没有吗？ 改为发布到我们的 Odyssey 论坛。