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作为第一个参数。

第二个参数是一个 options 对象，带有 variables 键。在这里，我们将添加 incrementTrackViewsId 并将其设置为我们正在导航到的音轨的 id。该 id 已从 track 属性顶部为我们分解。

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

现在，有一个奇怪之处：useQuery与 useMutation不同，调用 useMutation不会自动执行 ！

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

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

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

👆🏽设置 onClick

我们什么时候要运行突变函数？当用户单击卡片时！

我们来给 onClick添加一个属性 CardContainer组件并配置它以调用我们的突变函数， incrementTrackViews。

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

将该框中的项目拖动到上面的空白处

  • GraphQL 操作

  • 突变函数

  • useGqlQuery

  • 参数

  • 值

  • 选项

  • 数组

  • 变量

  • useMutation

  • 整数

  • 数据

  • useQuery

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 帐户才能在此处发布。没有 GitHub 帐户？ 转而发布在 Odyssey 论坛上。