6. Apollo Sandbox Explorer
10m

概述

现在是时候写一些查询,并查看我们的服务器返回一些(模拟的)数据!

在本课中,我们将

  • 学习如何导航 Explorer
  • 保存 以备将来使用

🚀 探索我们的第一个查询

要编写我们的测试 ,我们将使用 Apollo Sandbox。Sandbox 免费使用,无需帐户。它是 平台的一部分,有助于本地图形开发。

Apollo GraphOS 是一个用于构建、管理和扩展您的 的完整云平台。 提供了一套工具和服务,使产品开发人员能够专注于更快地构建更好的应用程序。

使用 Sandbox,我们可以加载 的模式,并使用一些很酷的 功能(例如模式参考和 Explorer)来探索它。

Explorer 是一个强大的 Web IDE,用于创建、运行和管理 。它让我们可以轻松快速地构建操作,查看操作历史记录,查看响应提示并与他人分享操作。

让我们确保我们的服务器正在运行(npm run dev)。让我们点击它输出的链接,到 https://127.0.0.1:4000。这会自动打开 Explorer 环境,并且它已为我们的模式开箱即用地配置好了。

任务!

探索 Explorer

当我们在 Explorer 中着陆时,我们会看到一个连接到 localhost:4000 的界面。它应该看起来像这样:

https://127.0.0.1:4000

The Explorer with the Documentation panel open

构建查询

中间的 Operation 面板是我们创建查询的地方。Explorer 可能已经填写了一个默认的 。让我们使用 + 按钮打开一个新的工作区选项卡,以全新开始。

我们可以手动编写 ,或从左侧的 Documentation 面板添加 :它使您能够深入到模式的 中,从 Query 类型的入口点开始。

单击 旁边的加号(⊕)按钮会自动将该字段添加到我们当前的 中。这是一种方便的方法,可以组装复杂的查询,而无需记住模式的确切结构或 语法。

让我们将 featuredListings 添加到我们的第一个 中。

https://127.0.0.1:4000

Adding the featuredlistings field to the Operation panel

我们会看到 Documentation 选项卡已更新,显示了我们可以添加的不同 ,以获取作为 Listing 类型返回的每个对象的數據。我们可以点击 "id" 旁边的加号按钮将其添加到我们的 中。

https://127.0.0.1:4000

Adding the featuredlistings id field to the Operation panel

这会自动更新 Operation 面板,其中包含我们选择的

https://127.0.0.1:4000

Adding the featuredlistings id field to the Operation panel

我们的 应该看起来像这样:

query FeaturedListings {
featuredListings {
id
}
}

开启模拟

如果我们现在运行这个 ,我们会看到一个错误。我们的服务器尚未配置为 返回 数据。幸运的是,Explorer 可以帮我们解决这个问题:我们可以为模式中的每个 打开模拟响应。

打开 Explorer 左侧的 Settings 面板。向下滚动以找到 Mock Responses 部分,并将其切换为开启状态。

https://127.0.0.1:4000

Accessing the Settings panel to turn on mocked responses

运行查询

Operation 面板的顶部是运行我们 的按钮。让我们现在点击它,看看会发生什么:

https://127.0.0.1:4000

Running the operation and seeing featured listing data in the Response panel

右侧的 Response 面板包含一个包含几个列表 ID 的对象!

添加所有字段

现在,我们只选择了 featuredListingsid ,但 Explorer 也有方法一次性将所有字段添加到 中。当我们点击 Fields 子标题旁的下拉菜单时,我们会看到有两个选项。

https://127.0.0.1:4000

Clicking the Fields dropdown in the Documentation panel

首先,我们可以选择 Select all scalar fields。这将选择 Listing 类型上所有返回没有额外子 的值的

点击 Select all scalar fields。我们会看到 titlenumOfBedscostPerNightclosedForBookings 已添加到我们的 中。

https://127.0.0.1:4000

All scalar fields added to the query

我们所有的 都已搞定,但我们会注意到下拉菜单中还有一个选项:Select all fields recursively。这个选项让我们可以一次性添加一个类型的所有 以及这些字段的任何 子字段;当一个 返回具有自身字段集的 时,这一点尤其重要。我们将在不久之后在添加模式时看到这一点!

运行查询

您完成的 应该与以下内容匹配:

query FeaturedListings {
featuredListings {
id
title
numOfBeds
costPerNight
closedForBookings
}
}

点击蓝色运行按钮提交

您的响应应类似于以下内容

保存操作

我们已经花时间构建了 FeaturedListings ,所以让我们利用 Explorer 的另一个功能,使再次构建它变得更加容易。(这部分需要 Apollo 帐户!)

Operation 面板的顶部,我们会找到一个保存图标按钮。

https://127.0.0.1:4000

The Save dropdown in the Explorer, showing the Save as option

点击 另存为 选项从下拉菜单中打开一个模态窗口,我们可以在其中为我们的 命名,并将其保存到一个 操作集合

通过集合,我们可以将一组 存储在便于访问的位置,以便在将来测试我们对模式的更改时快速访问。

让我们从为我们的 命名为 FeaturedListings,以便我们在需要时可以再次找到它。接下来,在 选择一个集合 下拉菜单中,让我们选择 Sandbox 下的选项以创建一个新的默认集合。

https://127.0.0.1:4000

Saving the Featuredlistings operation in a new Sandbox collection

在我们点击 保存 按钮后,我们会看到我们的 的选项卡现在有了我们分配给它的名称!此外,我们会看到一个书签图标,表示该操作已保存到集合中。

https://127.0.0.1:4000

Updated Explorer tab showing the name of the saved operation, along with a bookmark icon

我们可以使用 Explorer 左侧的面板来访问我们保存到集合中的 。点击菜单顶部的书签图标将打开所有 操作集合,在这里我们可以看到我们的 FeaturedListings 已保存,以便快速访问!

https://127.0.0.1:4000

Clicking the bookmark icon to access saved operations

模式 选项卡

在我们离开 Sandbox 环境之前,让我们查看一下我们的模式;它可以在我们主导航中的第一个选项卡下访问。

https://127.0.0.1:4000

A screenshot of the Schema page in Sandbox

这里我们对模式有完整的视图和引用!现在它很稀疏,但我们可以看到我们的 Query 类型,其中包含一个 featuredListings 返回一个 [Listing!]! 类型。

https://127.0.0.1:4000

The Schema page, scrolled down to highlight the featuredListings field

选项卡中,我们还可以看到 SDL 语法中的模式。这是我们的服务器运行请求时使用的实际模式!

https://127.0.0.1:4000

SDL page

练习

以下哪些是使用 Apollo Sandbox Explorer 的优势?

关键要点

  • Explorer 是一个完整的 IDE,可以内省正在运行的服务器的模式,并允许我们构建和发送查询。
  • 我们可以使用 集合来存储我们已经构建的操作,以便将来使用。

接下来

Explorer 可以做更多的事情,但现在我们只介绍这些。现在该继续我们的下一个主题了——连接一个真实的

上一个

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

本课程目前处于

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

您需要一个 GitHub 帐户才能在下面发布。没有吗? 改为在我们的 Odyssey 论坛中发布。