Skip to content
导航

GraphQL 介绍

GraphQL 是一种用于 API 的查询语言。它是一种替代RESTful API的方案。

它由Facebook开发和开源,现在由社区维护。

背景介绍

早期HTML是由服务端直出的,JavaScript用于页面交互。相当于现在的SSR,没有替代选项。

直到Ajax出现后,JavaScript可以通过Ajax请求后端接口(API),才有了现在的CSR。

对于前端而言,后端接口最常用方式就是通过HTTP协议与前端通信。只要能跑通流程就是可以在生产环境使用的接口。

但是,随着经验的增长,人们在实践中会遇到各种各样的问题,例如:

  • 请求的url携带参数过长而丢失
  • 认证字段到处放:cookie、header甚至是url上携带
  • 返回非JSON格式数据让前端难以处理

有问题就需要有解决方案,一个著名的方案是RESTful API。

RESTful API

RESTful API 是一种基于HTTP协议的API设计风格,指导后端设计API,前端使用API。这里收集了各种RESTful设计参考文档

REST这个词,是HTTP协议(1.0版和1.1版)的主要设计者 Roy Thomas Fielding,在他2000年的博士论文中提出的。

所以RESTful API 可以认为是对基于 HTTP 协议设计 API 的最佳实践指导,不适用于 WebSocket 等场景。

REST是Representational State Transfer的缩写,译为“表现层状态转化”,通俗地说就是让客户端使用恰当的 HTTP 协议内容让服务端完成响应内容的转变。例如API路径代表目标资源,method GET用来获取资源,POST用来新建资源,PUT用来更新资源,DELETE用来删除资源。

RESTful API 的优点

  • 是HTTP协议的最佳实践,足够语义化
  • 抽象化,围绕对资源的操作设计API,容易理解接受

RESTful API 的缺点

  • 不灵活
    要处理不同类型的资源,需要分别请求。 不支持请求资源的某一部分,总是返回资源的完整信息。
  • 缺乏标准
    RESTful API 不是一个标准,而是一种设计风格,缺乏约束力,导致即使是最佳实践也不是人人遵循。
  • 效率不高
    对资源的抽象过程影响开发效率,不正确的抽象会造成可维护性问题。
  • 适用场景有限
    RESTful API 是面向HTTP协议的设计风格。对于WebSocket等情况,RESTful API就不适用了。

GraphQL

GraphQL 是一种用于 API 的查询语言,它可以用于任何实现支持的场景。

示例

GraphQL请求示例代码

js
await graphqlWithAuth(`
  {
    repository(owner: "${owner}", name: "${repoName}") {
      issue(number: 1){
        number
        title
        labels(first: 100) {
          nodes {
            name
          }
        }
        createdAt
        body
      }
    }
  }
`)

GraphQL响应示例

js
{
  number: 1,
  title: '标题',
  labels: { nodes: [{"name":"label"}] },
  createdAt: '2023-06-29T02:46:46Z',
  body: 'issue content'
}

优点

  • 足够灵活
    按请求体结构返回层级结构的数据
  • 是一种语言标准
    规范了语法。可以使用在任何支持语言的工具、平台上
  • 高效率
    无需准备非常多的接口,以向前端提供数据

参考资料