GraphQL 是一种用于构建 API 的查询语言，它可以让前端开发者更加灵活地获取所需的数据。而 GraphQL Playground 则是一种交互式的 GraphQL IDE，可以方便地测试和调试 GraphQL 查询。在本文中，我们将介绍如何在 GraphQL Playground 中测试 GraphQL 查询，并提供一些示例代码来帮助你更好地理解。
GraphQL Playground 简介
GraphQL Playground 是一个基于 Web 的 GraphQL IDE，可以让我们轻松地创建、测试和调试 GraphQL 查询。它具有以下特点：
- 交互式编辑器：通过图形化界面、自动完成和语法高亮等功能，让我们更方便地编写 GraphQL 查询。
- 实时查询：自动保存我们所有的查询，并在我们每次修改时立即显示查询结果。
- GraphQL 文档：在右侧窗格中，可以查看 GraphQL API 的完整文档，包括 Query、Mutation 和 Subscription 等操作。
- 历史记录：记录我们最近查询过的所有查询，可以轻松重现和修改以前的查询。
- 建议和错误：如果查询中有语法错误或不合法的操作，GraphQL Playground 会自动提示和高亮错误。
在 GraphQL Playground 中编写查询
要在 GraphQL Playground 中编写查询，我们需要先访问 GraphQL API 的端点 URL。一般来说，可以在浏览器中输入该 URL 来打开 GraphQL Playground，例如：
http://localhost:4000/
接下来，我们可以在 GraphQL Playground 的左侧窗格中创建一个新的查询，如下所示：
query {
hello
}这是一个简单的查询，它只查询了一个名为 hello 的字段。要执行此查询，我们只需按下 "运行" 按钮，GraphQL Playground 将自动执行查询并在右侧窗口中显示结果，如下所示：
{
"data": {
"hello": "world"
}
}这是一个非常简单的示例，但它展示了 GraphQL Playground 的基本用法。接下来，我们将介绍更复杂的查询和操作。
示例代码：查询用户信息
假设我们正在构建一个社交媒体应用程序，并希望从 GraphQL API 中检索用户信息。我们可以使用以下查询来获取有关特定用户的信息：
// javascriptcn.com 代码示例
query getUserInfo($userId: ID!) {
user(id: $userId) {
id
name
email
posts {
title
text
createdAt
}
}
}在此查询中，我们使用了一个名为 getUserInfo 的操作，它接受一个名为 userId 的变量。然后，我们查询了一个名为 user 的字段，该字段接受一个 ID 参数，并返回用户的基本信息以及该用户发布的所有帖子。
要使用此查询，我们需要提供一个名为 userId 的变量，可以在 "变量" 窗格中设置它：
{
"userId": "1"
}然后点击 "运行" 按钮，GraphQL Playground 将显示我们所需的 JSON 数据。
示例代码：创建新用户
接下来，假设我们希望向社交媒体应用程序中添加新用户。我们可以使用以下 Mutation 操作来创建新用户：
mutation createUser($input: CreateUserInput!) {
createUser(input: $input) {
id
name
email
}
}在此操作中，我们使用了一个名为 createUser 的 Mutation 操作，它接受一个名为 input 的变量，该变量包含要创建的用户的基本信息。然后，我们查询了用户的 ID、名称和电子邮件地址，以便我们可以确认用户已成功创建。
要使用此操作，我们需要提供一个名为 input 的变量，可以在 "变量" 窗格中设置它：
{
"input": {
"name": "Lucy",
"email": "lucy@example.com"
}
}然后点击 "运行" 按钮，GraphQL Playground 将返回我们新创建的用户的 ID、名称和电子邮件地址。
总结：
本文介绍了如何在 GraphQL Playground 中测试 GraphQL 查询，并提供了一些示例代码和操作来帮助你更好地理解。希望这篇文章能够启发你更好地使用 GraphQL，构建更出色的应用程序！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f64807d4982a6eb8f1782