GraphQL - 查询语句

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字段。

步骤1  -  下载并安装依赖项

创建一个名为 query-app 的文件夹。从终端将目录更改为 query-app 。稍后，请按照"环境设置"一章中说明的步骤3到5进行操作。

步骤2  -  创建Schema文件

在项目文件夹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 将是一个自定义字段。

步骤3  -  创建解析器

在项目文件夹中创建文件 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}

步骤4  -  运行应用程序

创建一个 server.js 文件。请参阅环境设置一章中的步骤8。在终端中执行 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"
         }
      ]
   }
}

创建一个 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作为客户端来测试应用程序。

链接：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"
         }
      ]
   }
}

嵌套查询

让无涯教程创建一个嵌套查询，以获取学生详细信息及其大学详细信息。将使用相同的项目文件夹。

步骤1  -  编辑Schema文件

模式文件已经具有 student 字段添加一个College并定义其类型。

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   fullName:String
   college:College
}

步骤2  -  修改resolver.js

需要添加一个大学解析器函数，如下所示，在这种情况下，解析程序的根参数将包含 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 创建了学生与大学之间的关联关系。

步骤3  -  测试应用程序

打开终端窗口，然后导航到项目文件夹。输入命令 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
            }
         }
      ]
   }
}

什么是查询变量?

如果查询中有一些动态值要传递，则使用变量表示这些动态值。因此，查询可以被客户端应用程序重用。创建一个简单的应用程序以了解查询变量。

步骤1  -  编辑Schema文件

添加一个 sayHello 字段，该字段带有一个字符串参数并返回一个字符串。

type Query {
   sayHello(name:String!):String
}

步骤2  -  编辑resolver.js文件

添加 sayHello 解析器，该解析器的参数如下-

sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`

步骤3  -  在GraphiQL中声明查询变量

用$声明变量，后跟变量名。如:$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查询变量

让无涯教程看看当字段参数为枚举类型时如何使用查询变量。

步骤1  -  编辑schema.graphql文件

enum ColorType {
   RED
   BLUE
   GREEN
}

type Query {
   setFavouriteColor(color:ColorType):String
}

setFavouriteColor 函数将枚举作为输入并返回一个字符串值。

步骤2  -  编辑resolvers.js文件

解析器函数 setFavouriteColor 使用 root 和 args 。可以通过args参数访问在运行时传递给函数的枚举值。

setFavouriteColor:(root,args) => {
   return  "Your Fav Color is :"+args.color;
}

步骤3  -  在GraphiQL中声明查询变量

该查询名为 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"
   }
}