概述
现在是时候写一些查询,并查看我们的服务器返回一些(模拟的)数据!
在本课中,我们将
- 学习如何导航Apollo Sandbox Explorer
- 保存 操作 以备将来使用
🚀 探索我们的第一个查询
要编写我们的测试 查询,我们将使用 Apollo Sandbox。Sandbox 免费使用,无需帐户。它是 Apollo GraphOS 平台的一部分,有助于本地图形开发。
Apollo GraphOS 是一个用于构建、管理和扩展您的 图形 的完整云平台。 GraphOS 提供了一套工具和服务,使产品开发人员能够专注于更快地构建更好的应用程序。
使用 Sandbox,我们可以加载 GraphQL 服务器 的模式,并使用一些很酷的 GraphOS 功能(例如模式参考和 Explorer)来探索它。
Explorer 是一个强大的 Web IDE,用于创建、运行和管理 GraphQL 操作。它让我们可以轻松快速地构建操作,查看操作历史记录,查看响应提示并与他人分享操作。
让我们确保我们的服务器正在运行(npm run dev
)。让我们点击它输出的链接,到 https://127.0.0.1:4000。这会自动打开 Explorer 环境,并且它已为我们的模式开箱即用地配置好了。
探索 Explorer
当我们在 Explorer 中着陆时,我们会看到一个连接到 localhost:4000
的界面。它应该看起来像这样:
构建查询
中间的 Operation 面板是我们创建查询的地方。Explorer 可能已经填写了一个默认的 操作。让我们使用 + 按钮打开一个新的工作区选项卡,以全新开始。
我们可以手动编写 操作,或从左侧的 Documentation 面板添加 字段:它使您能够深入到模式的 字段 中,从 Query
类型的入口点开始。
单击 字段 旁边的加号(⊕)按钮会自动将该字段添加到我们当前的 操作 中。这是一种方便的方法,可以组装复杂的查询,而无需记住模式的确切结构或 GraphQL 语法。
让我们将 featuredListings
添加到我们的第一个 查询 中。
我们会看到 Documentation 选项卡已更新,显示了我们可以添加的不同 字段,以获取作为 Listing
类型返回的每个对象的數據。我们可以点击 "id" 旁边的加号按钮将其添加到我们的 查询 中。
这会自动更新 Operation 面板,其中包含我们选择的 字段。
我们的 查询 应该看起来像这样:
query FeaturedListings {featuredListings {id}}
开启模拟
如果我们现在运行这个 操作,我们会看到一个错误。我们的服务器尚未配置为 返回 数据。幸运的是,Explorer 可以帮我们解决这个问题:我们可以为模式中的每个 字段 打开模拟响应。
打开 Explorer 左侧的 Settings 面板。向下滚动以找到 Mock Responses 部分,并将其切换为开启状态。
运行查询
在 Operation 面板的顶部是运行我们 查询 的按钮。让我们现在点击它,看看会发生什么:
右侧的 Response 面板包含一个包含几个列表 ID 的对象!
添加所有字段
现在,我们只选择了 featuredListings
和 id
字段,但 Explorer 也有方法一次性将所有字段添加到 操作 中。当我们点击 Fields 子标题旁的下拉菜单时,我们会看到有两个选项。
首先,我们可以选择 Select all scalar fields。这将选择 Listing
类型上所有返回没有额外子 字段 的值的 字段。
点击 Select all scalar fields。我们会看到 title
、numOfBeds
、costPerNight
和 closedForBookings
字段 已添加到我们的 查询 中。
我们所有的 标量 字段 都已搞定,但我们会注意到下拉菜单中还有一个选项:Select all fields recursively。这个选项让我们可以一次性添加一个类型的所有 字段 以及这些字段的任何 子字段;当一个 字段 返回具有自身字段集的 对象类型 时,这一点尤其重要。我们将在不久之后在添加模式时看到这一点!
运行查询
您完成的 操作 应该与以下内容匹配:
query FeaturedListings {featuredListings {idtitlenumOfBedscostPerNightclosedForBookings}}
点击蓝色运行按钮提交 查询!
您的响应应类似于以下内容
保存操作
我们已经花时间构建了 FeaturedListings
操作,所以让我们利用 Explorer 的另一个功能,使再次构建它变得更加容易。(这部分需要 Apollo 帐户!)
在 Operation 面板的顶部,我们会找到一个保存图标按钮。
点击 另存为 选项从下拉菜单中打开一个模态窗口,我们可以在其中为我们的 操作 命名,并将其保存到一个 操作集合。
通过集合,我们可以将一组 操作 存储在便于访问的位置,以便在将来测试我们对模式的更改时快速访问。
让我们从为我们的 操作 命名为 FeaturedListings
,以便我们在需要时可以再次找到它。接下来,在 选择一个集合 下拉菜单中,让我们选择 Sandbox 下的选项以创建一个新的默认集合。
在我们点击 保存 按钮后,我们会看到我们的 操作 的选项卡现在有了我们分配给它的名称!此外,我们会看到一个书签图标,表示该操作已保存到集合中。
我们可以使用 Explorer 左侧的面板来访问我们保存到集合中的 操作。点击菜单顶部的书签图标将打开所有 操作集合,在这里我们可以看到我们的 FeaturedListings
操作 已保存,以便快速访问!
模式 选项卡
在我们离开 Sandbox 环境之前,让我们查看一下我们的模式;它可以在我们主导航中的第一个选项卡下访问。
这里我们对模式有完整的视图和引用!现在它很稀疏,但我们可以看到我们的 Query
类型,其中包含一个 featuredListings
字段 返回一个 [Listing!]!
类型。
在 SDL 选项卡中,我们还可以看到 SDL 语法中的模式。这是我们的服务器运行请求时使用的实际模式!
练习
关键要点
- Explorer 是一个完整的 IDE,可以内省正在运行的服务器的模式,并允许我们构建和发送查询。
- 我们可以使用 操作 集合来存储我们已经构建的操作,以便将来使用。
接下来
Explorer 可以做更多的事情,但现在我们只介绍这些。现在该继续我们的下一个主题了——连接一个真实的 数据源!
分享您对本课的疑问和评论
本课程目前处于
您需要一个 GitHub 帐户才能在下面发布。没有吗? 改为在我们的 Odyssey 论坛中发布。