graphql-1

graphql 与 restful

restful

属性状态转移,本质就是用定义uri,通过api接口来获取资源。通用系统架构,不受语言限制

  • restful一个接口只返回一个资源,graphql一次可以获取多个资源
  • restful用不同的url来区分资源,graphql用类型区分资源

express+graphql

最基本的写法
const express = require('express');
const {buildSchema} = require('graphql');
const {graphqlHTTP} = require('express-graphql');
// 定义schema,查询和类型
const schema = buildSchema(`
  type Query {
    hello: String
  }
`)
// 定义查询对应的解析器
const root = {
  hello: () => {
    return "hello world";
  }
}

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

app.listen(9000, () => {
  console.log("http://localhost:9000/graphql")
});
自定义类型

自定义类型就是先在Query中对要定义的类型进行说明,然后再自己在外面对这个类型进行定义

const express = require('express');
const {
  buildSchema
} = require('graphql');
const {
  graphqlHTTP
} = require('express-graphql');
// 定义schema,查询和类型
const schema = buildSchema(`
  type Account {         //
    name: String
    age: Int
    gender: String
    department: String
  }

  type Query {
    hello: String
    account: Account    // 
  }
`)
// 定义查询对应的解析器
const root = {
  hello: () => {
    return "hello world";
  },
  account: () => {
    return {
      name: "Doris",
      age: 18,
      gender: "female",
      department: "xi'an"
    }
  }
}

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

app.listen(9000, () => {
  console.log("http://localhost:9000/graphql")
});

通过刚才两个例子可以看出graphql的运行模式,首先分为两个部分,一部分为schema区,一部分为root区:

  • schema

    • 定义查询query的语句及类型(包括自己的自定义类型)
  • root

    • 定义查询对应的resolver,也就是查询对应的解析器

比如说上面代码中,在 schema 中定义了一个hello的查询,在 root 中就定义这个 hello 的方法对应的实现,也就是 hello 具体要做什么业务

⚠️ root 中 return 的返回值的类型应该和 schema 中的定义类型保持一致

参数类型

基本参数类型,可以在 schema 中直接使用

  • String
  • Int
  • Boolean
  • Float
  • ID

[类型]代表数组类型,如: [int] 代表 Int类型的数组

参数传递

基本参数类型的参数传递
type Query{
	getName(Id: ID!, Age: Int): [Int]
}
  • 和 js 传参一样,小括号内定义形参,参数需要定义类型
  • ! 代表字段不能为空

⚠️ getName(Id: ID!, Age: Int): [Int] 这句最后的[Int]的意思是getName这个查询的返回值是 Int 类型的数组

下面来看一下例子:

其中先在schema中定义一个getClassMates()的查询语句,加上形参,注意返回来的数据为string类型的数组。然后在root 中定义getClassMates()这个查询的解析器,其中 getClassMates({classNo}) 中的 {classNo} 其实是从arg中进行的结构赋值,当然也可以写成arg.classNo

const express = require('express');
const {
  buildSchema
} = require('graphql');
const {
  graphqlHTTP
} = require('express-graphql');
// 定义schema,查询和类型
const schema = buildSchema(`
  type Query{
    getClassMates(classNo: Int!): [String]
  }
`)
// 定义查询对应的解析器
const root = {
  getClassMates({ classNo }){
    const obj = {
      61 : ['doris', 'doris1', 'doris2'],
      62 : ['Doris', 'Doris1', 'Doris2']
    }
    return obj[classNo];
  }
}

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

app.listen(9000, () => {
  console.log("http://localhost:9000/graphql")
});
复杂参数类型的参数传递

比如说之前例子中的Account类型

下面的例子中有一个salary,在schema中这个salary是可以传一个city的参数的,这样在对应的root里面,salary就可以被当作一个function来处理,可以在里面进行条件判断等等

const express = require('express');
const {
  buildSchema
} = require('graphql');
const {
  graphqlHTTP
} = require('express-graphql');
// 定义schema,查询和类型
const schema = buildSchema(`
  type Account {
    name: String
    age: Int
    gender: String
    department: String
    salary(city: String): Int
  }
  type Query{
    getClassMates(classNo: Int!): [String]
    account(userName: String): Account
  }
`)
// 定义查询对应的解析器
const root = {
  getClassMates({ classNo }){
    const obj = {
      61 : ['doris', 'doris1', 'doris2'],
      62 : ['Doris', 'Doris1', 'Doris2']
    }
    return obj[classNo];
  },
  account({userName}){
    const name = userName;
    const age = 18;
    const gender = 'female';
    const department = "xi'an"
    const salary = ({city}) => {
      if(city === '北京' || city === '上海' || city === '广州' || city === '深圳'){
        return 10000;
      }
      return 8000;
    }
    return {
      name,
      age,
      gender,
      department,
      salary
    }
  }
}

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

app.listen(9000, () => {
  console.log("http://localhost:9000/graphql")
});

GraphQL Clients

如何在客户端访问graphql接口

  • 先在之前的js文件中添加一句可以在访问外部静态文件的代码
// 公开文件夹,供用户访问静态资源
app.use(express, static('public'));
  • 新建public文件夹,并在其中新建index.html文件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button onclick="getData()">获取数据</button>
</body>
<script>
  function getData() {
    // 这里的query是一个字符串类型,
    // 这个字符串规定了这个接口的名字,参数,参数类型等
    // 实际上它是来自服务器端的定义
    // 这里从Account的参数中拿到$userName后将它给到account的userName
    const query = `
      query Account($userName: String){
        account(userName: $userName)
      }
    `
    // 定义variables进行传值
    const variables = {userName: "doris"};

    // 通过fetch向外发数据
    fetch('/graphql', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        query: query,
        variables: variables
      })
    }).then(res => res.json).then(json => {
      console.log(data);
    })
  }
</script>
</html>

然后运行 js 文件,运行完毕之后在localhost:9000/index.html进行对应的操作

但是这时候在这个index页面中点击获取数据按钮的时候会报错👇

是因为我们在查询的时候并没有告诉它我们需要什么样的字段,所以我们应该在

const query = `
      query Account($userName: String){
        account(userName: $userName)
      }
    `

这个代码中加入需要的字段

const query = `
      query Account($userName: String){
        account(userName: $userName){
			name
			age
			gender
			department
      		salary(city: "上海")
		}
      }
    `

这个时候就可以看到结果了

当然,salary中的city值也可以通过参数传递进来

const query = `
  query Account($userName: String, $city: String){
    account(userName: $userName){
      name
      age
      gender
      department
      salary(city: $city)
    }
  }
`
// 定义variables进行传值
const variables = {userName: "doris", city: "西安"};
关于 阿里云盘CLI。仿 Linux shell 文件处理命令的阿里云盘命令行客户端,支持JavaScript插件,支持同步备份功能,支持相册批量下载。 特色 多平台支持, 支持 Windows, macOS, linux(x86/x64/arm), android, iOS 等 阿里云盘多用户支持 支持备份盘,资源库无缝切换 下载网盘内文件, 支持多个文件或目录下载, 支持断点续传和单文件并行下载。支持软链接(符号链接)文件。 上传本地文件, 支持多个文件或目录上传,支持排除指定文件夹/文件(正则表达式)功能。支持软链接(符号链接)文件。 同步备份功能支持备份本地文件到云盘,备份云盘文件到本地,双向同步备份保持本地文件和网盘文件同步。常用于嵌入式或者NAS等设备,支持docker镜像部署。 命令和文件路径输入支持Tab键自动补全,路径支持通配符匹配模式 支持JavaScript插件,你可以按照自己的需要定制上传/下载中关键步骤的行为,最大程度满足自己的个性化需求 支持共享相册的相关操作,支持批量下载相册所有普通照片、实况照片文件到本地 支持多用户联合下载功能,对下载速度有极致追求的用户可以尝试使用该选项。详情请查看文档多用户联合下载 如果大家有打算开通阿里云盘VIP会员,可以使用阿里云盘APP扫描下面的优惠推荐码进行开通。 注意:您需要开通【三方应用权益包】,这样使用本程序下载才能加速,否则下载无法提速。 Windows不第二步打开aliyunpan命令行程序,任何云盘命令都有类似如下日志输出 如何登出和下线客户端 阿里云盘单账户最多只允许同时登录 10 台设备 当出现这个提示:你账号已超出最大登录设备数量,请先下线一台设备,然后重启本应用,才可以继续使用 说明你的账号登录客户端已经超过数量,你需要先登出其他客户端才能继续使用,如下所示
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值