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