概述
现在该写一些查询了，看看我们的服务器是否返回了一些（硬编码）数据！
在本课中，我们将
- 学习如何导航Apollo Sandbox Explorer
- 保存 操作 以备将来使用
🚀 探索我们的第一个查询
为了编写我们的测试 查询，我们将使用 Apollo Sandbox。Sandbox 免费使用，不需要帐户。它是 Apollo GraphOS 平台的一部分，有助于本地图开发。
Apollo GraphOS 是一个完整的云平台，用于构建、管理和扩展您的 图。 GraphOS 提供了一套工具和服务，使产品开发人员能够专注于更快地构建更好的应用程序。
使用 Sandbox，我们可以加载一个 GraphQL 服务器 的 Schema 并使用一些很酷的 GraphOS 功能（如 Schema 参考和 Explorer）来探索它。
Explorer 是一个功能强大的 Web IDE，用于创建、运行和管理 GraphQL 操作。它使我们能够轻松快速地构建操作，查看操作历史记录，查看响应提示并与他人共享操作。
让我们确保我们的服务器正在运行，然后打开浏览器并前往 Apollo Sandbox Explorer！
探索 Explorer
当我们在 Explorer 中登陆时，我们会看到一个大部分为空的界面。
这是因为它还没有连接到 GraphQL API——特别是我们刚花了一些时间构建的那个！
让我们先把它连接起来。在 Explorer 的顶部，我们会看到一个输入框，用于输入服务器运行的位置。默认情况下，我们的 GraphQL 服务器 可用于 查询 在 https://127.0.0.1:8080/graphql 上，因此我们可以将该 URL 粘贴到此输入框中。
https://127.0.0.1:8080/graphql
过了一会儿，我们应该看到一个小圆点变成绿色——这意味着 Explorer 已成功连接！我们还会看到 UI 已经更新了一些新元素。接下来让我们探索一下。
构建查询
中间的 操作 面板是我们在其中创建查询的地方。Explorer 可能已经填充了一个默认的 操作。让我们使用 + 按钮打开一个新的工作区选项卡，以便从头开始。
我们可以手动编写 操作，或从左侧的 文档 面板添加 字段：它使您能够深入挖掘 Schema 的 字段，从 Query 类型的入口点开始。
单击 字段 旁边的加号 (⊕) 按钮会自动将该字段添加到我们当前的 操作 中。这是一种方便的方法，可以在不需要记住 Schema 的确切结构或 GraphQL 语法的情况下组装复杂的查询。
让我们将 featuredListings 添加到我们的第一个 查询 中。
我们会看到 文档 选项卡已更新，显示了我们可以添加的不同 字段，以获取作为 Listing 类型返回的每个对象的 data。我们可以单击 id 旁边的加号按钮，将其添加到我们的 查询 中。
这会自动使用我们选择的 字段 更新 操作 面板。
以下是我们的 查询 应该是什么样的：
query FeaturedListings {featuredListings {id}}
在 操作 面板的顶部是运行 查询 的按钮。现在让我们点击它，看看会发生什么：
右侧的 响应 面板包含一个包含列表 ID 列表的对象！
{"data": {"featuredListings": [{"id": "1"},{"id": "2"}]}}
Adding all fields
Right now, we've selected only the featuredListings and id fields, but the Explorer also has a way to add all fields to an operation at once. When we click the dropdown by the Fields subheading, we'll see that we have two options.
First, we have the option to Select all scalar fields. This will select all of the fields on the Listing type that return a value that does not have additional subfields.
Click Select all scalar fields. We'll see the title, numOfBeds, costPerNight, and closedForBookings fields have been added to our query.
All of our scalar fields are taken care of, but we'll notice there's a second option in the dropdown: Select all fields recursively. This option lets us add all of a type's fields, and any of those field's subfields, all at once; this is particularly important when a field returns an object type that has its own set of fields. We'll see this shortly when we add to our schema!
Running the query
Your completed operation should match the following:
query FeaturedListings {featuredListings {idtitlenumOfBedscostPerNightclosedForBookings}}
Take it for a spin in the Explorer!
Here's the response we should see
Saving an operation
We've already spent the time building out the FeaturedListings operation, so let's take advantage of another Explorer feature that makes constructing it again even easier. (You'll need a Studio account for this part!)
At the top of the Operation panel, we'll find a save icon button.
Clicking the Save as option from the dropdown opens a modal where we can give our operation a name, and save it to an operation collection.
With a collection, we can store a group of operations in a place that's quick to access when we want to test future changes to our schema.
Let's start by giving our operation the name FeaturedListings so that we can locate it when we need it again. Next, in the Select a collection dropdown, let's select the option under Sandbox to create a new default collection.
After we click the Save button, we'll see that our operation's tab now has the name we assigned to it! Additionally, we'll see a bookmark icon that indicates that this operation is saved to a collection.
We can use the panel on the left of the Explorer to access operations that we've saved to a collection. Clicking the bookmark icon at the top of the menu opens up all of our Operation Collections, where we can see our FeaturedListings operation has been saved for quick access!
The Schema tab
Before we leave the Sandbox environment, let's check out our schema; it's accessible under the first tab in our main navigation.
Here we have a full view and reference into our schema! It's pretty sparse right now, but we can see our Query type with a featuredListings field that returns a [Listing!]! type.
In the SDL tab, we can also see the schema in SDL syntax. This is the actual schema that our server is running its requests against!
Practice
关键要点
- Explorer 是一个功能齐全的 IDE，它可以内省正在运行的服务器的架构，并允许我们构建和发送查询。
- 我们可以使用 operation 集合来存储我们已经构建的 operation 以备将来使用。
下一步
Explorer 的功能远不止这些，但现在我们只介绍这些。是时候转到我们的下一个主题——连接一个真正的 数据源！
分享您关于本课的疑问和评论
本课程目前正在
您需要一个 GitHub 帐户才能在下面发布。还没有吗？ 请在我们的 Odyssey 论坛中发布。