概述
我们有足够的资源来测试我们的GraphQL 服务器。我们可以使用 curl 命令向它发送请求——GraphQL 服务器 毕竟会接受 HTTP 请求！让我们通过使用 GraphQL IDE 来简化我们的工作。
在本课中，我们将
- 了解使用 Apollo 沙盒
- 为沙盒设置 CORS
- 检查 GraphQL 服务器 的架构
- 构建我们的第一个 查询
Apollo 沙盒
输入 Apollo 沙盒。沙盒免费使用，不需要账户。它是 Apollo GraphOS 平台的一部分，有助于本地图开发。
Apollo GraphOS 是一个完整的云平台，用于构建、管理和扩展您的 图。 GraphOS 提供了一套工具和服务，使产品开发人员能够更快地专注于构建更好的应用程序。
使用沙盒，我们可以加载 GraphQL 服务器 的架构，并使用一些很酷的 GraphOS 功能（如架构参考和浏览器）来探索它。
浏览器是一个功能强大的 Web IDE，用于创建、运行和管理 GraphQL 操作。它使我们能够轻松快速地构建操作，查看操作历史记录，查看响应提示，并与他人共享操作。
转到浏览器，然后前往 Apollo 沙盒 的地址 https://studio.apollographql.com/sandbox。
让我们尝试连接到我们的服务器。在左上角，粘贴 https://127.0.0.1:5059/graphql 并按 Enter 或单击该框之外。
糟糕！我们看到一个红色的状态圆圈，并显示一条消息“无法访问服务器”。如果我们单击“更愿意自行诊断”提示，第一个建议是检查 CORS（跨源请求）。实际上，如果我们在浏览器中打开开发者工具，就会看到一条控制台消息
Access to fetch at 'https://127.0.0.1:5059/graphql' from origin'https://studio.apollographql.com' has been blocked by CORS policy.
为沙盒设置 CORS
要使沙盒能够连接到我们的 GraphQL 服务器，我们需要设置 CORS。
注意：您可以在 Microsoft .NET 文档 中找到有关 在 Microsoft .NET 文档中启用 CORS 的更详细的信息。
打开 Program.cs 文件。
首先，让我们添加一个专门针对沙盒的 CORS 策略，以允许服务器接收任何标头和方法。
builder.Services.AddCors(options =>{options.AddDefaultPolicy(builder =>{builder.WithOrigins("https://studio.apollographql.com").AllowAnyHeader().AllowAnyMethod();});});
注意：此代码段与我们添加 GraphQL 服务器 到 Web 应用程序服务的位置是 分开 的。
然后，在初始化 app 的行下面，让我们添加 CORS 中间件以允许跨域请求。
app.UseCors();
就是这样！让我们保存更改并使用 dotnet run 重新启动服务器。
探索我们的架构
回到沙盒，我们现在应该在端点旁边看到一个绿色的状态圆圈，错误消息消失了！
太棒了，让我们看看我们的架构，它是我们主导航中的第一个选项卡。
这里我们对我们的架构有完整的视图和参考！现在它很稀疏，但我们可以看到我们的 Query 类型，它有一个 hello 字段，它返回一个 String 类型。
在 SDL 选项卡中，我们还可以看到以 SDL 语法表示的架构。
请记住，我们在代码中使用了基于注释的方法，Hot Chocolate 负责将其转换为 GraphQL 架构 并将 C# 类型转换为 GraphQL 类型。
它还将 C# 约定转换为 GraphQL 约定！例如，GraphQL 中的 字段 以小写字母开头，但 解析器 函数以大写字母开头。因此，尽管我们在 C# 代码中将字段的解析器函数写为 Hello（带大写“H”），但在我们的 hello（带小写“h”）中看到了 GraphQL SDL！使用 Hot Chocolate 框架，我们可以继续在我们熟悉的 C# 环境和约定中进行编码，而无需在其中记住 GraphQL。
探索浏览器
让我们回到浏览器页面。
中间的 操作 面板是我们创建查询的地方。浏览器可能已经填写了一个默认的 操作。让我们使用“+”按钮打开一个新的工作区选项卡，以全新开始。
我们可以手动编写 操作，或者从左侧的 文档 面板添加 字段。
浏览器的 文档 选项卡使我们能够深入了解架构的 字段，从 Query 类型的入口点开始。
单击 字段 旁边的加号 (⊕) 按钮会自动将该字段添加到我们当前的 操作 中。这是一种方便的方法，可以组装复杂的查询，而无需记住架构的精确结构或 GraphQL 语法。
继续添加 hello 字段。
query Query {hello}
在 操作 面板的顶部是运行我们 查询 的按钮。让我们现在单击它，看看会发生什么：
右侧的 响应 面板显示了从我们的服务器返回的数据。Hello world! 👋
{"data": {"hello": "Hello world"}}
我们刚刚运行了第一个 GraphQL 查询！ 🎉
练习
关键要点
- Apollo Sandbox 是一款功能强大的 Web IDE，专为本地 图 开发而设计。它简化了创建、运行和管理 GraphQL 操作 的过程。
- 从 Apollo Sandbox 连接到本地 GraphQL 服务器 时，可能会出现跨域请求策略导致的 CORS 问题。请确保您的 GraphQL 服务器允许来自 Sandbox URL 的请求。
- Apollo Sandbox Explorer 允许我们探索我们的 GraphQL 模式 并轻松构建和运行 GraphQL 操作。
- Hot Chocolate 允许开发人员在熟悉的 C# 环境和约定中进行编码。它将这些 C# 类型和约定转换为 GraphQL SDL 和幕后的约定。
接下来
让我们提升这个模式的速度，展示一些播放列表！
分享您对此课程的疑问和评论
本课程当前处于
您需要一个 GitHub 帐户才能在下面发布。没有帐户吗？ 改为在我们的 Odyssey 论坛上发布。