GraphQL Query 查询

GraphQL 操作可以是读取或写入操作。GraphQL Query(查询)用于读取或获取值,而 Mutation 用于写入或发布值。在任何一种情况下,操作都是一个简单的字符串,GraphQL 服务器可以解析和响应特定格式的数据。通常用于移动和 Web 应用程序的流行响应格式是 JSON。

定义 Query 的语法如下

// 语法 1
query query_name{ someField }

// 语法 2
{ someField }

以下是查询的示例

query myQuery{
   greeting
}

// 不使用任何名称进行查询
{
   greeting
}

从上面的例子可以清楚地看出,query 关键字是可选的。

GraphQL 查询有助于减少过度获取数据。与 Restful API 不同,GraphQL 允许用户限制应该从服务器获取的字段。这意味着更小的查询和更少的网络流量;这反过来又减少了响应时间。

使用自定义字段查询学生模型

在此示例中,我们将一组学生存储在 json 文件中。每个学生模型都有像 firstName、lastName 和 id 这样的字段,但没有 fullName。在这里,我们将讨论如何进行查询以检索所有学生的 fullName。为此,我们需要在两个架构解析器中创建 fullName 字段。

一、 下载并安装项目所需的依赖项

创建一个名为app的文件夹。从终端将目录更改为 app。然后,按照开发环境的搭建中说明的步骤 3 到 5 完成下载和安装过程。

二、 创建schema

在项目文件夹app 中添加 schema.graphql 文件并添加以下代码

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。在这种情况下,fullName将是数据源不可用的自定义字段。

三、创建解析器

在项目文件夹中创建一个文件resolvers.js,并添加以下代码

resolvers.js

const db = require('./db')
const Query = {
   //greeting 解析器
   greeting:() => {
      return "hello from  TutorialsPoint !!!"
   },
   
   // students 解析器返回学生列表
   students:() => db.students.list(),

   //studentById 解析器
   studentById:(root,args,context,info) => {
      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 作为客户端来测试应用程序。打开浏览器并输入 URL,http://localhost:9000/graphiql

在编辑器中输入以下查询

{
   students{
      id
      fullName
   }
}

查询的响应如下

{
  "data": {
    "students": [
      {
        "id": "S1001",
        "fullName": "feng:qianlang"
      },
      {
        "id": "S1002",
        "fullName": "Kannan:Sudhakaran"
      },
      {
        "id": "S1003",
        "fullName": "Kiran:Panigrahi"
      }
    ]
  }
}

GraphQL Query 运行结果

查看笔记

扫码一下
查看教程更方便