教程 > graphql 教程 > 阅读:922

graphql query 查询——迹忆客-ag捕鱼王app官网

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 运行结果

查看笔记

扫码一下
查看教程更方便
网站地图