GraphQL 是一种新型的 API 查询语言，它可以让你更加精确地查询你需要的数据，避免了 RESTful API 中出现的过度查询和返回过多数据的问题。GraphQL 的另一个优点就是可以使用图形化界面进行查询，这使得前端开发者可以更方便地使用 GraphQL 进行开发。
本文将介绍如何在 GraphQL 中使用图形化界面进行查询，包括如何设置 GraphQL 服务器和如何使用 GraphiQL 工具进行查询。
设置 GraphQL 服务器
首先，我们需要设置一个 GraphQL 服务器，这里我们使用 Node.js 和 Express 来搭建一个简单的 GraphQL 服务器。
安装依赖
首先，我们需要安装一些依赖，包括 express、graphql 和 express-graphql：
--- ------- ------- ------- ---------------
编写代码
接下来，我们编写一个简单的 GraphQL 服务器：
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - ----------- - - -------------------
-- -- ------- ------
----- ------ - -------------
---- ----- -
------ ------
-
---
-- -- ---------
----- ---- - -
------ -- -- ------ --------
--
-- -- ------- --
----- --- - ----------
-- -- ------- --
------------------- -------------
------- -------
---------- -----
--------- -----
----
-- -----
---------------- -- -- -
-------------------- - ------- --- ------ -- --------------------------------
---这个服务器只有一个 hello 查询，返回一个字符串 'Hello world!'。
在这个服务器中，我们使用了 express-graphql 中的 graphqlHTTP 中间件来处理 GraphQL 请求。graphiql: true 表示启用图形化界面。
使用 GraphiQL 工具
GraphiQL 是一个 GraphQL 的图形化界面工具，它可以让前端开发者更方便地进行查询。
打开 GraphiQL
当我们访问 http://localhost:4000/graphql 时，会自动打开 GraphiQL 工具。
编写查询
在左侧的查询编辑器中，我们可以编写我们的查询语句，例如：
- ----- -
点击右侧的运行按钮，可以看到返回结果：
使用参数查询
在 GraphQL 中，我们可以使用参数进行查询，例如：
-
-------- -- -
----
---
-
-这个查询会返回 ID 为 1 的用户的姓名和年龄。
我们需要在 GraphQL schema 中定义这个查询：
---- ----- - -------- ----- ---- - ---- ---- - --- --- ----- ------ ---- --- -
然后在 resolvers 中实现这个查询：
----- ----- - - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- -- -- ----- ---- - - ----- -- -- -- -- --------------- -- ------- --- ---- --
这个 resolvers 中的 user 函数接收一个参数 id，返回 ID 为 id 的用户对象。
使用 Mutation
除了查询之外，我们还可以使用 Mutation 对数据进行修改。
例如，我们可以定义一个添加用户的 Mutation：
---- -------- - ------------- -------- ---- ------ ---- -
这个 Mutation 接收两个参数 name 和 age，返回添加的用户对象。
在 resolvers 中实现这个 Mutation：
--- ------ - --
----- ---- - -
-------- -- ----- --- -- -- -
----- ---- - - --- --------- ----- --- --
-----------------
------ -----
--
--这个 resolvers 中的 addUser 函数接收两个参数 name 和 age，返回添加的用户对象。
总结
在本文中，我们介绍了如何在 GraphQL 中使用图形化界面进行查询，包括如何设置 GraphQL 服务器和如何使用 GraphiQL 工具进行查询。我们还介绍了如何使用参数查询和 Mutation。希望本文对你学习 GraphQL 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650c84e895b1f8cacd677ad5