8. 路由器配置和上行
4m

概述

到目前为止,FlyBy 的 正在运行,并且它们的模式已经发布,但我们仍然需要一个部分来将所有内容整合在一起:

在本课中,我们将

  • 设置 在本地
  • 连接
  • 发送我们第一个 到我们的

✏️ 下载路由器

是一款高性能图形路由器,可作为可执行二进制文件使用,您可以通过几个步骤将其添加到您的项目中:

  1. 打开一个终端窗口,并导航到router FlyBy 项目中的目录。

    cd router

    到目前为止,我们这里只有 .env 文件,其中包含我们的环境变量。

    📦 router
    ┣ 📄 .env
  2. 我们将通过在终端中运行安装命令来下载

    router
    curl -sSL https://router.apollo.dev/download/nix/v1.46.0 | sh

    注意: 访问官方文档以 探索下载路由器的替代方法

  3. 现在,当我们检查 router 目录的内容时,我们会发现我们有一个名为 router 的新文件!

    📦 router
    ┣ 📄 .env
    ┗ 📄 router

✏️ 运行路由器

  1. 回到同一个终端窗口,运行以下命令。您需要将 <APOLLO_KEY><APOLLO_GRAPH_REF> 占位符值替换为 您的 的对应值,这些值来自 router/.env 文件。该命令在本地启动 ,并告诉路由器连接到哪个

    APOLLO_KEY=<APOLLO_KEY> APOLLO_GRAPH_REF=<APOLLO_GRAPH_REF> ./router
  2. 我们会看到几行 输出,最后是一条消息,表明我们的路由器正在端口 4000 上运行,准备接收查询!

    让我们复制此地址,我们将在 Studio 中设置连接设置时需要它。这将告诉我们的 API 的外部使用者,他们可以使用哪个端点来 我们的模式。

    GraphQL endpoint exposed at http://127.0.0.1:4000/ 🚀

    注意: 因为我们的 目前正在运行 http://127.0.0.1:4000,它实际上无法被外部世界访问。但我们仍然可以将其添加到我们的配置设置中,这将使我们能够从自己的机器上

✏️ 将路由器连接到 GraphOS

让我们回到 Studio。

  1. 点击侧边栏中的 README 选项卡。

  2. 接下来,点击页面顶部的 连接设置 链接。

    studio.apollographql.com/graph/flyby/variant/current/home
    The Connection Settings link to add an endpoint
  3. 我们将粘贴我们复制的 地址 (http://127.0.0.1:4000) 作为端点,然后保存。

    studio.apollographql.com/graph/flyby/variant/current/home
    The Connection Settings modal to add an endpoint

让我们开始 我们的

✏️ 测试我们的模式

  1. 从侧边栏中选择 资源管理器 选项卡。

  2. 让我们组合一个 ,它从我们的两个 中检索数据。我们将我们的查询命名为 GetLocationsAndLatestReviews

  3. 现在让我们添加一些 。我们将从 locations 开始。点击 Fields 旁边的加号按钮 () 将所有位置 添加到我们的 中。

    接下来,让我们返回并添加 latestReviews,以及所有评论子

    我们的 应该如下所示:

    query GetLocationsAndLatestReviews {
    locations {
    id
    name
    description
    photo
    }
    latestReviews {
    id
    comment
    rating
    }
    }
  4. 在我们运行 之前,让我们将右侧的 Response 下拉菜单更改为 Query Plan Preview。这将向我们展示 的图表,该图表是 将用来解析我们当前 的。

    studio.apollographql.com/graph/flyby/explorer?variant=current
    Viewing the Query Plan Preview panel for a query, with steps broken down in a diagram
  5. 选择图标 以文本形式显示计划,我们将看到更详细的 的分解。我们不会担心这里的语法,但我们可以大致了解 计划如何处理此查询: locations 将解析 locations ,而 reviews 将处理 latestReviews 和其子

    studio.apollographql.com/graph/flyby/explorer?variant=current
    Viewing the Query Plan Preview panel for a query, with steps broken down in text
  1. 现在让我们运行这个

    studio.apollographql.com/graph/flyby/explorer?variant=current
    Querying both subgraphs at once for data

太棒了!我们可以看到我们的响应中的 data 对象包含 两者 位置和评论。

这太棒了。我们刚刚解锁了我们的 的强大功能之一:我们可以向我们的 写一个 ,并同时命中两个

练习

GraphOS Studio 中的查询计划预览包含哪些信息?

关键要点

  • 是一个可执行的二进制文件,可以下载并本地运行。
  • 预览检查资源管理器中的 ,并输出 将执行以解析操作的查询计划。

下一步

恭喜,我们现在有一个可用的 !我们的前端团队可以从单个 中获取所需的所有数据,并且通过将后端模块化,我们还改进了开发体验!

但我们还需要解决一个问题。

还记得我们尚未添加到模式中的那三个 吗?您还记得!以下是模式协议,以唤醒您的记忆:

The FlyBy schema diagram, updated to check off the fields we've added to the reviews and locations subgraphs so far

即使我们的 可以分别 每个 ,但我们还无法在两个子图之间关联数据。

好了,接下来我们将学习使我们的 之间的协调成为可能的特性:实体。

上一步

分享您对本课的疑问和评论

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

您需要一个 GitHub 帐户才能在下方发帖。没有? 在我们的奥德赛论坛中发帖。