GraphQL 入门: 简介

GraphQL 入门: 简介
GraphQL 入门: Apollo Client - 简介
GraphQL 入门: Apollo Client - 安装和配置选项
GraphQL 入门: Apollo Client - 链接到数据
GraphQL 入门: Apollo Client - 网络层
GraphQL 入门: Apollo Client - 开发调试工具
GraphQL 入门: Apollo Client - 持久化GraphQL查询概要
GraphQL 入门: Apollo Client - 存储API
GraphQL 入门: Apollo Client - 查询(Batching)合并

GraphQL 是Facebook开发的一个应用层查询语言. 后端定义基于图的模式. 客户端能够按需查询须要的数据.

上图所示, 查询流程分为几个步骤, 涉及多个组件, 包括客户端应用程序(Web, 手机, 桌面等App), 一个GraphQL服务器用于解析查询, 以及多个不一样的数据来源.

客户端数据要求发生变化时, 不须要修改后端. 所以, 你没必要由于客户端数据需求的变动而改变你的后端. 这解决了管理REST API中的最大的问题.

为何解决了REST API的大问题, 看以下阐述:

注解:

只要你的业务模型没有发生变化, 从数据模型不会发生变化, 那么咱们就不须要修改后端API. 前端按照须要的字段进行查询便可. 若是业务发生了变化, 咱们只须要修改GraphQL的模式定义, 而且实现对应的服务器端数据查询逻辑便可. 传统的REST查询那些字段是固定的, 客户端不能指定, GraphQL可让客户端指定要获取那些字段的数据, 这给客户端带来了极大的灵活性, 让先后端进一步分离. 查询是能够嵌套的, 返回的JSON对象结构和GraphQL查询的结构是同样的, 这样更方便客户端本身定义数据的结构.

GraphQL一样可以让客户端程序高效地批量获取数据. 例如, 看一看下面这个GraphQL请求:

{
  latestPost {
    _id,
    title,
    content,
    author {
      name
    },
    comments {
      content,
      author {
        name
      }
    }
  }
}

这个 GraphQL 请求获取了一篇博客文章和对应评论与做者信息的数据. 下面是请求的返回结果:

{
  "data": {
    "latestPost": {
      "_id": "03390abb5570ce03ae524397d215713b",
      "title": "New Feature: Tracking Error Status with Kadira",
      "content": "Here is a common feedback we received from our users ...",
      "author": {
        "name": "Pahan Sarathchandra"
      },
      "comments": [
        {
          "content": "This is a very good blog post",
          "author": {
            "name": "Arunoda Susiripala"
          }
        },
        {
          "content": "Keep up the good work",
          "author": {
            "name": "Kasun Indi"
          }
        }
      ]
    }
  }
}

若是你使用的是REST的话，你须要调用多个REST API的请求才能获取这些信息。

上手视频

打开GraphQL沙箱, 而后跟着下面的视频练习:
https://v.qq.com/x/page/r0387...

GraphQL是一个规范

所以, 它能够用于任何平台或语言. 它有一个参考的实现 JavaScript, 由Facebook维护. 还有许多社区维护的实现有许多种语言。

以前咱们用简短的描述说明了GraphQL是什么, 对其有了一个基本的映像, 如今咱们经过实际的操做来感觉GraphQL具体是一个什么东西.

首先在浏览器中打开: https://sandbox.learngraphql.com ,而后在左侧的查询窗口中输入下面的查询语句:

咱们会看到下图的GraphiQL查询界面, 其界面窗口以下所示:

{
  latestPost {
    title,
    summary
  }
}

咱们将在右侧的窗口看到查询的结果以下:

{
  "data": {
    "latestPost": {
      "title": "New Feature: Tracking Error Status with Kadira",
      "summary": "Lot of users asked us to add a feature to set status for errors in the Kadira Error Manager. Now, we've that functionality."
    }
  }
}

如今咱们体验了一下GraphQL是怎么工做的, 下面咱们来扩展一下, 起始GraphQL的功能远比你如今看到的要强大.

咱们能够打开右上角的Docs链接, 能够看到整个基于图的模式有哪些东西是咱们可使用的. 下面我经过一个视频来演示怎么样进一步深刻使用GraphQL.