6. 分享超图
4m

概述

Poetic Plates 旨在成为公共 API,供任何人发现和试用新食谱,无论是通过 Web 应用、移动应用,还是其他 API。

在此课程中,我们将

  • 创建一个公开,让任何人可以使用 Explorer 轻松构建和运行查询
  • 配置 的 CORS 策略,以接受来自任何来源的请求

图形变体

让我们从 开始。 变体表示 运行的不同环境。

例如,我们可以为暂存或预生产准备 ,这是一个常见的环境,我们可以在其中测试架构更改,然后再上线。我们可以为生产准备另一个变体,该变体处于上线状态并由客户端使用。

中,的每个 都有自己的架构、指标、变更历史记录、以及 历史记录。

到目前为止,我们只使用 的一个版本:在生产环境中运行的版本。这实际上是我们的第一个 ,称为 main。默认情况下,这个 是私有的,只有我们工作室组织的成员才能看到。

注意:虽然我们在本地环境工作,但是我们已连接到生产数据。在现实世界中,你可能会有单独的 来处理本地查询和 ,以免生产数据受到损害。你可以在 航海 III 课程中了解有关图形变体和工作流的更多信息。

我们想要允许组织外部的人自由浏览架构并使用 Explorer 发送查询,因此我们需要将这个 设为公共的。

通过创建一个 公共变体,我们的 API 使用者将能够看到以下页面:

  • 主页,其中显示 的 README,以帮助新来者快速上手
  • 架构,其中显示构成 的类型和
  • Explorer,使用户可以构建并运行查询。
  • 变更日志显示我们 的最新更改。

显示你 指标(字段操作)和设置的页面无法查看!

创建公共变量

让我们继续我们的 main 公开。

  1. 转到我们的 设置页面并打开 此变量标签。

  2. 查找 公共卡片并单击更改。

    https://studio.apollographql.com

    Saving public variant settings

  3. 选择 开启并保存我们的更改。

    https://studio.apollographql.com

    Saving public variant settings

  4. 注意,现在的顶部标题显示了一个标记为“公共”的按钮。单击它以导航到 的公开版本。

在这个公开版本中,我们只能查看前面提到的四个页面。我们准备好了,可以分享此链接,让其他烹饪冒险家探索!

额外:继续编辑你的 自述文件!在 自述文件页面,单击铅笔图标编辑自述文件。包括与你的 一起工作的开发人员有关的任何信息。你想如何向他们介绍它?他们了解什么很重要?他们可以先了解哪些查询?

配置云路由器 cors 选项

接下来,我们需要允许 任何基于 Web 的应用程序使用者向 发送请求。毕竟,我们希望 Poetic Plates 得到广泛使用!我们需要配置 cors选项来启用此功能。

回到 Studio,在我们的 设置页面中,在 此变体下,我们将单击 云路由器选项卡。

https://studio.apollographql.com

The Router Configuration page in Apollo Studio

在这里我们可以配置运行 的方式。我们已经在 路由器配置 YAML部分中获得了一些默认配置。

路由器配置 YAML
cors:
origins:
- https://studio.apollographql.com
headers:
subgraphs:
recipes:
request:
- propagate:
matching: ".*"

第一个键 cors包含另一个键 (origins),该键包含允许 的 URL 列表。现在,只有 Studio 允许查询路由器!

我们还可以查看 recipes 标头配置,该配置传播每个请求头部。我们不会过分担心这一点,但确实希望更改 cors属性!

让我们移除 origins列表,因为我们不会指定要允许的每个来源。在下面(仍然嵌套在 cors属性内),我们将添加一个称为 allow_any_origin的新属性并将其设置为 true

路由器配置 YAML
cors:
allow_any_origin: true

然后,点击 保存

https://studio.apollographql.com

The Router Configuration page in GraphOS Studio, with localhost added and the Save icon emphasized

如果我们 设置此选项,客户端应用程序开发人员会在其浏览器中看到一个错误,指出他们的 localhost 或生产 URL 已被 CORS 策略阻止。

练习

关于云路由器的以下哪些说法是正确的?
关于公共版本,以下哪些说法是正确的?

要点

  • 要让其他人可以探索和 一个面向公众的 API,您可以在 Studio 中创建一个公共
  • 要让任何 Web 应用程序使用者都能连接到您的面向公众的 API,您可以将 cors 设置进行配置并设置 allow_any_origintrue

接下来

我们可以与全世界分享我们的 太棒了!既然它已经发布了,那么我们来了解一下,我们将如何监控我们的超级图表的用法。

上一个

分享你的问题和对此课程的评论

你的反馈能够帮助我们改进!如果你遇到困难或感到困惑,请告诉我们,我们会帮助你解决。所有评论都是公开的,且必须遵循 Apollo 行为准则。请注意,已解决或处理的评论可能会被删除。

你需要一个 GitHub 帐户才能在下面发帖。没有 GitHub 帐户? 转而在我们的 Odyssey 论坛发帖。