6. 将图形连接到 Apollo Studio
10m

必要的 GraphQL 开发者工具

很棒的工作！我们有一个正在运行的，它与来自多个数据源的数据进行交互。现在，在我们跳转到客户端之前，让我们启用一些强大的工具。

Apollo Studio是一个云平台，可帮助你完成 的每个阶段，从原型制作到部署以及监视。

Studio 的核心功能对每个人都是免费的。本教程中的所有功能都是免费功能。

创建你的第一个图形

在 Apollo Studio 中，每个 图形都有一个对应的 。对于你的第一个图形，我们将使用你刚刚完成构建的服务器架构。

注意：根据你创建帐户的时间和所采用的计划，你的 Studio 帐户可能与我们在视频或课程说明中展示的内容略有不同。


在继续课程之前，展开以下部分以找到关于如何创建 的具体步骤。


  1. 为你的 提供一个名称。
  2. 在本教程中，我们使用一个 ，所以将 图表架构设置为 Monolith。

默认的 架构是一个 超图表，由底层 （即 API）组成。查看我们的实践 ✨Voyage 系列✨了解更多信息。

  1. 单击 下一步。将出现一个对话框，指示你注册你的架构。我们将在下一步中完成此操作。

连接你的服务器

可以直接与 Apollo Studio 通信，以便注册其架构并推送有用的性能指标。此通信需要 图表 API 密钥。让我们为我们的 获取一个。

从你的 Studio 主页单击你新创建的 。这将显示你创建图表后出现的同一个对话框：

复制对话框底部该代码块中所有的环境变量定义（APOLLO_KEY是你 ）。

设定环境变量

你通过将 设定为 的环境变量 APOLLO_KEY的值，就可以将其提供给 。

在 start/server 中创建一个 .env 文件，方法是复制 start/server/.env.example。然后从 Studio 中的对话框粘贴环境变量：

.env
APOLLO_KEY= YOUR_API_KEY
APOLLO_GRAPH_REF= YOUR_GRAPH_ID@GRAPH_VARIANT
APOLLO_SCHEMA_REPORTING=true

Graph API 密钥是秘密凭证。绝不要在组织外部共享它们或将它们提交到版本控制中。删除和替换可能遭到泄露的 API 密钥。

加载环境变量

dotenv 包提供从 .env 文件读取环境变量的支持。

导航到 start/server/src/index.js，您会看到我们已经为您配置了一行 dotenv：

start/server/src/index.js
require("dotenv").config();

重新启动服务器

使用 npm start 重新启动服务器后，返回到 Studio 主页。十五秒左右后，Studio 将收到服务器架构，您可以查看其完整详细信息。（如果您没有看到任何更新，请尝试刷新页面！）

任务！

试用免费 Studio 功能

将服务器连接到 Apollo Studio 可激活各种强大的功能

资源管理器

如本教程前面部分所示 使用沙盒，Apollo Studio 资源管理器可以全面查看您的架构，包括您在其中包含的所有文档字符串。使用它创建查询并对服务器执行这些查询。

Studio Explorer tab

架构变更日志

打开 变更日志 选项卡以查看您的服务器随着时间推移发送的架构版本记录的完整版本历史：

Schema Changelog

该变更日志帮助您准确识别特定类型或 已添加或已移除的时间，这在诊断问题时至关重要。

操作指标

会将指标数据推送到 Studio，用于每个 （它会执行该操作）。此数据包括每个 （在操作中得到解析）的时序和错误信息细目。

不会将 结果推送到 Studio。如需了解详情，请查阅数据隐私和遵从性。

打开 操作标签页，基于服务器的过去 24 小时的 跟踪结果，查看性能数据：

Studio Operations tab

使用付费 Studio 计划的组织，可以查看过去 90 天（或更久的）指标数据，具体取决于订阅的计划。如需详细了解付费 Studio 功能，请参阅 Studio 文档。

既然我们的服务器已连接到 Studio，那我们就开始构建一个客户端来执行一些查询吧！

上一个