GraphQL入门

REST api

  • REST api简单来说就是将服务器资源定向到每个api上,比如localhost:8000/posts/1,对应查找文章的第一个,localhost:8000/comments/3,表示查找评论的第三条。REST的表达方式很简单,就是一条资源对应一个api,简洁明了。

    GraphQL api

  • 想象一个场景,前端需要查询一个用户的name,age,和用户发表的文章列表。传统api怎么设计?后端设计两个接口,一个查询用户信息,一个查询用户文章。前端调这两个接口,获得返回的信息,再把两个接口的数据组装起来。
  • 能不能将上面的场景简化一些呢?前端只需要调一个接口,就可以查出用户的信息和用户的文章。
  • GraphQL 出现了。GraphQL api是一种特别灵活的api设计,他将传统的查询逻辑,交给了客户端。用代码举一个例子:
    `javascript
    var express = require(‘express’);
    var graphqlHTTP = require(‘express-graphql’);
    var { buildSchema } = require(‘graphql’);
    var schema = buildSchema(type Query { name: String url: String, info: String });

var root = {
name: () => ‘zlx’,
url: () => ‘https://avatars1.githubusercontent.com/u/22437181?v=4',
info: () => ‘a frontend developer’
};

var app = express();
app.use(‘/graphql’, graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
app.listen(4000, () => console.log(‘Now browse to localhost:4000/graphql’));

上面代码定义了一个GraphQL api服务器,且定义一个schema,包含了三条属性的信息:

name: String
url: String,
info: String

下面执行查询看看效果:
```javascript
var request = require('graphql-request').request
const query = `{
  name
}`

request('http://localhost:4000/graphql', query).then(data =>
  console.log('data:', data)
)

上面代码,在前端执行了查询,只查询name属性:
image

如果我要查询name,url和info三条信息呢?
只需要在前端查询语句上加上对应的字段:

const query = `{
  name,
  url,
  info
}`

image
⚠️注:上面代码实现是javascript语言的GraphQL 实现,其他语言实现参考这里
这就是GraphQL api,它使接口请求更加灵活,更加适用于复杂场景,也使后端查询设计更加简单,后端工程师只需要定义好数据库和相关的表结构的Schema,所有查询逻辑交给前端来处理,使开发变得高效。