概述

我们现在拥有 FlyBy 的完整模式超级图。现在是时候将所有部分整合在一起，并确保我们的后端服务器满足我们在开始时设置的所有前端需求！

在本课中，我们将

• 运行 FlyBy 客户端，它将 查询 我们的 超级图
• 检查所有 GraphQL 操作 在前端代码中按预期工作

返回到前端

您可能已经注意到我们没有回顾任何前端代码。我们与前端团队的初始会议为我们的后端应该提供的数据设定了预期，但从那时起，我们不需要妨碍他们的工作来实现 UI。让我们看看他们构建了什么！

启动客户端

打开一个新的终端窗口，并导航到client 目录。

使用 npm install 安装软件包，然后运行 npm start 来 启动 应用程序。

在浏览器中，导航到https://127.0.0.1:3000 以查看 FlyBy 主页。

哦不！我们可以看到页面显示了一个错误： Failed to fetch。

但是等等，我们使用 Studio 查询了我们的 超级图 非常完美！那么为什么客户端无法连接呢？

跨源资源共享 (CORS) 和路由器

我们的客户端无法连接是因为 CORS，它代表 跨源资源共享。CORS 是一种协议，它使您的服务器能够指定哪些网站可以与之通信。

默认情况下， GraphOS 路由器 仅允许 Studio (https://studio.apollographql.com) 连接到您的服务器。

这意味着我们需要配置 路由器 也允许来自 https://127.0.0.1:3000 (我们的客户端运行的地方) 的请求，同时我们在本地测试它。

✏️ 配置 CORS 设置

有许多不同的方法可以配置 路由器 的 CORS 选项。对于 FlyBy，我们将使用 origins 属性来明确指定哪些客户端 URL 允许连接到 路由器。

1. 在 router 目录中，创建一个名为 config.yaml 的文件。此文件将允许我们在启动时自定义 路由器。

2. 添加以下配置。它使用 origins 键并指定 Studio 和本地运行的客户端都应该能够连接到 路由器。

   config.yaml

   cors:
     origins:
       - http://127.0.0.1:3000 # Allows any locally-running client to run against your Router
       - https://studio.apollographql.com # Allows Studio to still run queries against your Router

   Copy

3. 在终端中，如果您的 路由器 仍在运行，请使用 CTRL+C 停止进程。

4. 我们将再次运行 路由器，但使用一个额外的参数： --config 标志以及我们配置文件的路径。

   APOLLO_KEY=<APOLLO_KEY> APOLLO_GRAPH_REF=<APOLLO_GRAPH_REF> ./router --config ./config.yaml

   Copy

   The 路由器 应该成功运行，控制台输出指示它运行的端口。

检查客户端

让我们再次查看 FlyBy 主页，地址为 https://127.0.0.1:3000。好了，我们看到了显示的数据！

我们的模型已经栩栩如生！我们可以亲眼看到位置、评论并提交我们自己的评论。我们的 超级图 在幕后为我们平稳地工作！

主要收获

• 客户从单个 GraphQL 服务器请求数据：也就是 路由器。
• 该 路由器 可以设置 CORS 规则来指定哪些网站可以与之通信。
• 我们可以通过 路由器的配置文件来设置这些规则（和其他配置）。

结论

这是一个令人兴奋的构建 超级图 的旅程！我们已经走到了课程的结尾，涵盖了许多我们可以用来搭建带有超级图的新项目的原则。

我们了解了为什么我们会从一开始就选择 Apollo Federation 来构建一个模块化的 GraphQL API，它可以随着我们的产品和开发团队的增长而扩展。

我们使用 托管联邦 工作流程来发布我们的 子图，并在 Studio 中可视化组合后的 超级图模式。

最后，我们深入研究了如何创建实体来引用和贡献新的 字段 到跨 子图 的类型。

一路走来，我们将所有这些整合在一起，创造了一个 超级图，为 FlyBy 体验提供支持。

感谢您加入我们，一起踏上了探索 Apollo Federation 和 超级图 的第一次航程。我们期待在下一门课程中见到您，航程 II：联合单体！