变更: 创建链接

在本节中,您将学习如何使用 Apollo 发送变更。实际上与发送查询并不一样,遵循前面提到的相同的三个步骤,步骤3中的次要(但逻辑上)有所不同:

  1. 使用 gql 解析器函数将该变量写为 JS 常量
  2. 使用 graphql 容器来包装组件与变更
  3. 组件可以通过访问自己的属性来调用注入的变更函数

准备 React 组件

像以前一样,让我们​​开始编写一个用户添加新的链接的组件。

这是一个具有两个 input 字段的 React 组件,用户可以在提供要创建的 Linkurl 地址描述。在这些字段中输入的数据将存储在组件的 状态,它们将用于当变更发送时 _createLink

编写变更

但是现在怎么能实际发送变更呢?让我们按照以前的三个步骤。

首先,需要在 JavaScript 代码中定义变更,并使用 graphql 容器包装组件。可以像之前的查询一样做。

我们再仔细看一下,了解发生了什么:

  1. 首先创建存储变更的名为 CREATE_LINK_MUTATION 的 JavaScript 常量。
  2. 定义了实际的 GraphQL 变更。调用这个变更时需要提供两个参数 url 地址描述
  3. 最后,使用 graphql 容器把 CreateLink 组件和 CREATE_LINK_MUTATION 组合起来。指定的 name 是注入 CreateLink 的属性的名称。这一次,一个函数将被注入,称为 createLinkMutation,可以调用并传递所需的参数。

让我们在实际情况中看看变更!

如所承诺的,我们需要做的就是将 Apollo 注入的功能称为 CreateLink ,并传递代表用户输入的变量。

现在,运行 yarn start,将会看到如下:

仅仅只有两个输入字段和一个提价按钮 - 不是很漂亮,但功能已实现。

在字段中输入一些数据,例如:

  • 描述: The best learning resource for GraphQL
  • URL 地址: www.howtographql.cn

然后点击 提交 按钮。不会在 UI 中获得任何视觉反馈,但是通过检查 playground 中的当前链接列表,我们来看看查询是否真的有效。

在终端输入 graphcool playground 并发送下面查询:

{
  allLinks {
    description
    url
  }
}

将会看到下面的响应:

{
  "data": {
    "allLinks": [
      {
        "description": "The best learning resource for GraphQL",
        "url": "www.howtographql.com"
      },
      // ...
    ]
  }
}

干的漂亮!变更起作用了!💪

Unlock the next chapter
下列哪些陈述是正确的?
只有查询可以用 `graphql` 高阶组件包装
'gql' 是来自 react-apollo 包的高阶组件。
当使用 'graphql' 包装一个具有变更的组件时,Apollo 将一个函数注入到组件的属性。
GraphQL 变更从来没有任何参数