GraphQL 是一种查询语言，它可以帮助前端开发人员更好地管理应用程序的数据。GraphQL Playground 是一个强大的工具，用于在浏览器中探索和测试 GraphQL 查询。它为开发人员提供了一个可视化的界面，可以轻松地构建和调试 GraphQL 查询。本文将介绍如何使用 npm 包 @saeris/graphql-playground-middleware-hapi 将 GraphQL Playground 集成到 Hapi 框架中。
安装和配置
首先，您需要安装 @saeris/graphql-playground-middleware-hapi npm 包。您可以使用以下命令来安装该包：
npm install @saeris/graphql-playground-middleware-hapi --save
接下来，您需要在您的 Hapi 服务器中插入 middleware。在调用 server.start 之前，请确保添加 graphqlPlayground middleware 到服务器实例中：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- - ----------------- - - ------------------------------------------------------ ----- ------ - ------------- ----- ---- --- -- ----------- ----------------- ------- ------------------- --------- ------------------------------- -- --- ----- -------- ------- - ----- --------------- ------------------- ------- -- ---- ----------------- - --------
此时，您已经成功将 GraphQL Playground 集成到 Hapi 框架中。你可以通过访问 http://localhost:3000/graphql 来访问 GraphQL Playground。
指南
在 GraphQL Playground 中，您将看到一个类似于以下截图的界面：
您可以在左侧面板中编写 GraphQL 查询。在右侧面板中，您将看到与查询相对应的响应数据。如果您有动态参数，您可以将其放在左下方的 QUERY VARIABLES 面板中。如果您想查看一个日期范围内的查询结果，您可以使用上方的时间选择器。接下来，我们将介绍如何编写有效的 GraphQL 查询。
查询数据
您可以使用 query 关键字查询数据。
query {
user(id: 1) {
name
age
}
}查询列表
您可以使用 query 关键字和一个 list 字段来查询列表数据。
query {
allUsers {
id
name
age
}
}查询过滤数据
您可以使用 query 关键字，一个 filter 字段和一个 id 参数来查询过滤数据。
query {
allUsers(filter: {id: {eq: 1}}) {
id
name
age
}
}查询分页数据
您可以使用 query 关键字，一个 pagination 字段和一个 skip 和 limit 参数来查询分页数据。
query {
allUsers(pagination: {skip: 0, limit: 10}) {
id
name
age
}
}结论
在本文中，我们介绍了如何使用 npm 包 @saeris/graphql-playground-middleware-hapi 将 GraphQL Playground 集成到 Hapi 框架中。我们还详细介绍了 GraphQL 查询的基本结构。这将使前端开发人员更加了解 GraphQL，同时也能更快地构建和测试应用程序的数据请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9d81e8991b448e7617