GraphQL 入门

简介

GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

使用JavaScript 构建项目

基于 Express webserver 服务器的一个 GraphQL API 服务端参考实现，你可以用它结合常规 Express webserver 来运行 GraphQL，也可以作为独立 GraphQL 服务器。

npm install express express-graphql graphql

然后使用 node server.js 以运行 server.js 中的代码：

var express = require('express');
var { graphqlHTTP } = require('express-graphql');
var { buildSchema } = require('graphql');

// String Int Boolean ID float 是schema的基本数据类型 可以在shema声明时直接使用
var schema = buildSchema(`
  type Query {
    hello: String,
  }
`);

var root = { hello: () => 'Hello world!' };

var app = express();
app.use('/graphql', graphqlHTTP({
  // 定义方法和类型
  schema: schema,
  // 处理schema 逻辑处理，需要放回的值
  rootValue: root,
  // graphiql 是否启用调试界面
  graphiql: true,
}));
app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

Query查询

type Query 必须存在, Query为查询的数据

// User 是自定义的一个数据类型
var schema = buildSchema(`
  type Query {
    hello: String,
    userList: [User],
    user(name: String!): User
  }
  type User {
    id: Int,
    name: String
  }
`);

Mutation变更

GraphQL 建立了一个规范，任何修改数据的操作都应该使用 mutation 来发送。

input 表示输入对象，看上去和普通对象一摸一样，除了关键字是 input 而不是 type。它的特别之处在于，输入对象可以用在复杂的参数中，经常是 mutation 的参数，比如下面 createUser 的参数。

input UserInput {
  id: Int!
  name: String!
}

type Mutation {
  createUser(user: UserInput!): User!
}

root

对query 和 mutation 的逻辑操作

// 充当数据库
const userList = [
  { id: 1, name: 'Tom' },
  { id: 2, name: 'Joke' }
]
var root = {
  // hello查询
  hello: () => 'Hello world!',
  // 获取所有user
  userList: () => userList,
  // 根据名字获取user
  user: (parent) => {
    // 获取传入的参数
    const { name } = parent;
    // find user by name...
    const user = userList.find(item => item.name === name)
    return user
  },
  // 创建user
  createUser:(parent) => {
    const { user } = parent
    userList.push(user)
    return user
  }
};

前端

前端调用方法 与restful API 一样
不过是body内的传参变成了固定的几个参数

• query: 查询语句
• variables: 传入参数，若为空可以不传

let variables = null
let query = ''
// 查询user name为Tom 的user 查询时可去掉query
// query ='query user($name: String!){ user(name:$name) { id, name} }'
// 传入name的值
// variables = {name:'Tom'}
// 或者 也可以这么写 将传入的值写入query内
// query = '{user(name:"Tom"){id}}'

// 创建user
// query = ' mutation createUser($user: UserInput!){ createUser(user:$user){ id, name }}'
// variables = {
//   user: {id: 4, name: 'xiao'}
// }
// 或
// query = 'mutation { createUser( user:{ id: 5, name: "xiao" }){ id, name } }'
fetch('http://localhost:4000/graphql',{
  method: "POST",
  headers: {
    'Content-type': 'application/json',
    'Aceept': 'application/json'
  },
  body:JSON.stringify({
    query,
    // variables
  })
}).then(res => res.json)
  .then(res => {
  //查询user { data: { user: { id: 1, name: 'Tom'} } }
  //创建user { data: { user: { id: 4, name: 'xiao'} } }
  console.log(res);
})

总结

restful据url查询所有的字段结构都是固定好的当需要改变字段时只能改接口或是重写接口，会造成资源重复调用的问题
grapql按需查询（写法上增加的代码重复性，增加了前端的代码量），需要什么拿什么 只有一个接口
grapql不包含任何SQL语句，数据库处理，它只是将数据拿到之后进行一下过滤，再返回给前端

下面是RESTFul与GraphQL 大概的比较

	RESTFul	GraphQL
优点	接入简单	查询方便，按需查询
缺点	接口管理问题	会增加架构复杂度

参考
官方地址：https://graphql.com/
中文地址：https://graphql.cn/