GraphQL 操作可以是读操作,也可以是写操作。 GraphQL 查询用于读取或获取值。在任何一种情况下,操作都是一个简单的字符串,GraphQL 服务器可以解析和响应特定格式的数据。通常用于移动和 Web 应用程序的流行响应格式是 JSON。
定义查询的语法如下-
//语法 1 query query_name{ someField } //语法 2 { someField }
以下是查询的示例-
//名称为 myQuery 的查询 query myQuery{ greeting } //没有名称的查询 { greeting }
从以上示例可以看出,query关键字是可选的。
GraphQL查询有助于减少数据的过度获取问题,与Restful API不同,GraphQL允许用户限制应从服务器获取的字段,这意味着更少的查询和更少的网络流量,从而减少了响应时间。
在此示例中,无涯教程将一组学生存储在json文件中。每个学生模型都有诸如firstName,lastName和id之类的字段,但没有fullName。在这里将讨论如何进行查询以检索所有学生的全名。为此,需要在两个模式解析器中创建fullName字段。
创建一个名为 query-app 的文件夹。从终端将目录更改为 query-app 。稍后,请按照"环境设置"一章中说明的步骤3到5进行操作。
在项目文件夹query-app中添加 schema.graphql 文件,并添加以下代码-
type Query { greeting:String students:[Student] studentById(id:ID!):Student } type Student { id:ID! firstName:String lastName:String fullName:String }
请注意, students.json 文件中没有任何 fullName 字段。但是需要通过查询获取学生的全名。在这种情况下, fullName 将是一个自定义字段。
在项目文件夹中创建文件 resolvers.js 并添加以下代码-
const db=require('./db') const Query={ //greeting的解析器函数 greeting:() => { return "hello from LearnFk !!!" }, //students返回列表的解析器函数 students:() => db.students.list(), //studentbyId 的解析器函数 studentById:(root,args,context,info) => { //args 将包含在查询中传递的参数 return db.students.get(args.id); } } //对于返回的每个学生对象,都会调用解析器 const Student={ fullName:(root,args,context,info) => { return root.firstName+":"+root.lastName } } module.exports={Query,Student}
创建一个 server.js 文件。请参阅环境设置一章中的步骤8。在终端中执行 npm start命令。服务器将启动并在9000端口上运行。在这里,无涯教程使用GraphiQL作为客户端来测试应用程序。
链接:https://www.learnfk.comhttps://www.learnfk.com/graphql/graphql-query.html
来源:LearnFk无涯教程网
打开浏览器,然后输入URL http://localhost:9000/graphiql 。在编辑器中键入以下查询-
{ students{ id fullName } }
查询的响应在下面给出-
{ "data": { "students": [ { "id": "S1001", "fullName": "Learnfk:Mohammad" }, { "id": "S1002", "fullName": "Kannan:Sudhakaran" }, { "id": "S1003", "fullName": "Kiran:Panigrahi" } ] } }
创建一个 server.js 并添加以下代码-
const bodyParser=require('body-parser'); const cors=require('cors'); const express=require('express'); const db=require('./db'); const port=9000; const app=express(); //从模式文件加载类型定义 const fs=require('fs') const typeDefs=fs.readFileSync('./schema.graphql',{encoding:'utf-8'}) //加载解析器 const resolvers=require('./resolvers') //绑定模式和解析器 const {makeExecutableSchema}=require('graphql-tools') const schema=makeExecutableSchema({typeDefs, resolvers}) //启用跨域调用和表单提交 app.use(cors(), bodyParser.json()); //启用路由 const {graphiqlExpress,graphqlExpress}=require('apollo-server-express') app.use('/graphql',graphqlExpress({schema})) app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'})) //注册端口 app.listen(port, () => console.info(`Server started on port ${port}`));
在终端中执行命令npm start。服务器将启动并在9000端口上运行。在这里,无涯教程使用GraphiQL作为客户端来测试应用程序。
打开浏览器,然后输入URL http://localhost:9000/graphiql 。在编辑器中键入以下查询-
{ students{ id fullName } }
查询的响应在下面给出-
{ "data": { "students": [ { "id": "S1001", "fullName": "Learnfk:Mohammad" }, { "id": "S1002", "fullName": "Kannan:Sudhakaran" }, { "id": "S1003", "fullName": "Kiran:Panigrahi" } ] } }
让无涯教程创建一个嵌套查询,以获取学生详细信息及其大学详细信息。将使用相同的项目文件夹。
模式文件已经具有 student 字段添加一个College并定义其类型。
type College { id:ID! name:String location:String rating:Float } type Student { id:ID! firstName:String lastName:String fullName:String college:College }
需要添加一个大学解析器函数,如下所示,在这种情况下,解析程序的根参数将包含 student 。
const Student={ fullName:(root,args,context,info) => { return root.firstName+":"+root.lastName }, college:(root) => { return db.colleges.get(root.collegeId); } } module.exports={Query,Student}
解析器通过调用大学收集的get方法并传递 collegeId 来返回每个学生的大学。通过 collegeId 创建了学生与大学之间的关联关系。
打开终端窗口,然后导航到项目文件夹。输入命令 npm start。启动浏览器,然后输入URL http://localhost:9000/graphiql 。
在GraphiQL窗口中输入以下查询-
{ students{ id firstName college { id name location rating } } }
查询的响应如下所示-
{ "data": { "students": [ { "id": "S1001", "firstName": "Learnfk", "college": { "id": "col-102", "name": "CUSAT", "location": "Kerala", "rating": 4.5 } }, { "id": "S1002", "firstName": "Kannan", "college": { "id": "col-101", "name": "AMU", "location": "Uttar Pradesh", "rating": 5 } }, { "id": "S1003", "firstName": "Kiran", "college": { "id": "col-101", "name": "AMU", "location": "Uttar Pradesh", "rating": 5 } } ] } }
如果查询中有一些动态值要传递,则使用变量表示这些动态值。因此,查询可以被客户端应用程序重用。创建一个简单的应用程序以了解查询变量。
添加一个 sayHello 字段,该字段带有一个字符串参数并返回一个字符串。
type Query { sayHello(name:String!):String }
添加 sayHello 解析器,该解析器的参数如下-
sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`
用$声明变量,后跟变量名。如:$myname_Variable。
声明$myname_Variable后,必须将其与命名查询语法一起使用。查询myQuery接受字符串值,并将其传递给sayHello,如下所示-
query myQuery($myname_Variable:String!) { sayHello(name:$myname_Variable) }
在GraphiQL客户端将$myname_Variable的值设置为JSON对象。
{ "myname_Variable": "Learnfk" }
上面代码的输出如下-
{ "data": { "sayHello": "Hi Learnfk GraphQL server says Hello to you!!" } }
让无涯教程看看当字段参数为枚举类型时如何使用查询变量。
enum ColorType { RED BLUE GREEN } type Query { setFavouriteColor(color:ColorType):String }
setFavouriteColor 函数将枚举作为输入并返回一个字符串值。
解析器函数 setFavouriteColor 使用 root 和 args 。可以通过args参数访问在运行时传递给函数的枚举值。
setFavouriteColor:(root,args) => { return "Your Fav Color is :"+args.color; }
该查询名为 query_to_setColor ,它采用ColorType的名称color_variable的变量,该变量传递给方法setFavouriteColor。
query query_to_setColor($color_variable:ColorType) { setFavouriteColor(color:$color_variable) }
在GraphiQL的查询变量部分中,输入以下代码-
{ "color_variable":"RED" }
响应如下所示-
{ "data": { "setFavouriteColor": "Your Fav Color is: RED" } }
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)