GraphQL 教程:从零开始学习 GraphQL

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

GraphQL 是一种用于 API 开发的查询语言和运行时。它由 Facebook 于 2012 年开发,目的是为了替代 RESTful API。虽然目前使用 RESTful API 的频率极高,但 GraphQL 作为一种更加高效、灵活且易于理解的 API 工具,正在成为越来越多的前端工程师的首选。

什么是 GraphQL?

GraphQL 是一种基于标记语言的查询语言,它通过定义一套 API 与前端工程师建立连接。与 RESTful API 不同,GraphQL 思路不是按照资源去设计,而是按照客户端使用的视角去设计。也就是说,前端工程师可以根据自己的需要自由地组合、选择 API 的输出内容。

GraphQL 分为三个部分:查询语言、服务端和客户端。前端工程师通过查询语言发起请求,服务端将结果返回,客户端响应并呈现结果。

如何使用 GraphQL?

使用 GraphQL 可以分三步走:

1. 创建 Schema

Schema 是用来描述查询的类型结构的。在 GraphQL 中,Schema 包含了三种类型:Query、Mutation 和 Subscription。其中 Query 是可选的,而 Mutation 和 Subscription 是必选的。

---- ----- -
  ---------- ------ ------
  ------------------ ------- --------- ----- --------
-

---- ------ -
  --- ----
  ---------- ------
  --------- ------
  ------ ------
-

---- ---- -
  --- ----
  ------ ------
  --------- ----
-

如上,我们定义了三个类型:Query 类型、Author 类型和 Book 类型。其中 Query 类型作为根节点,Author 和 Book 类型则可以用来拓展查询。

2. 编写 Resolver

Resolver 的任务是负责解析 Schema 中定义的类型,返回实际的数据。

----- ------- - -
  -
    --- --
    ---------- -------
    --------- ------
    ------ -
      -
        --- --
        ------ -------- -----
        --------- --
      --
    --
  --
--

----- --------- - -
  ------ -
    ------- --- - -- -- -- --------------------- -- --------- --- ----
    ----------- --- - ------- -------- -- -- -
      --- ------- - -------------
      -- -------- -
        ------- - ----------------------- --
          --------------------------------- -- --------------------------------
        --
      -
      -- ---------- -
        ------- - ---------------- ----------
      -
      ------ --------
    --
  --
  ------- -
    ------ -------- -- -
      ------ ------------------- -- ------------- --- -----------
    --
  --
--

------ ------- ----------

如上,我们定义了两个 Query 类型的 Resolver 和一个 Author 类型的 Resolver。其中,firstBook 和 allAuthors 用来查询数据,books 用来获取一个作者的所有书。

3. 发起请求

使用 GraphQL,前端工程师会向服务端发起请求,请求会以一个 JSON 对象的形式被发送至服务端。如下是一个发起 GraphQL 请求的 JavaScript 示例代码:

------ - ------------- ---- ------------- - ---- -----------------

----- ------ - --- --------------
  ---- ------------------------------
  ------ --- ----------------
---

------
  --------
    ------ ----
      ----- --------- -
        ---------- -- -
          --
          ---------
          --------
          ----- -
            --
            -----
          -
        -
      -
    --
  --
  -------------- -- ---------------------

如上所示,我们使用 ApolloClientgqlInMemoryCache 创建出一个 GraphQL 客户端,并调用其 query 方法发起请求,query 方法的参数为一个 graphql string

GraphQL vs. RESTful API

在使用 RESTful API 进行开发时,一般需要考虑如何组织资源的映射关系,并通过 URL 暴露给客户端。但随着系统和应用功能的增加,RESTful API 的 URL 结构会变复杂,很难满足系统和应用各种查询的要求。

相对于 RESTful API,GraphQL 有以下优势:

1. 接口精简

RESTful API 通常为每个资源都提供一个固定 URL,URL 中包含资源的集合、子集合等信息。如果需要获取某个相关联的资源,则必须获取完整的父资源url,然后再进行关联。

GraphQL 中则不同,因为Schema中已经定义了数据模型,客户端只需要通过数据查询请求所需嵌套的信息,服务端会根据Schema返回所需的数据,减少了无用的数据通信。

2. 灵活性

在 RESTful API 的 URL 结构中,一旦设计存在问题,后期改动将比较困难。GraphQL 通过 Schema 的方式来组织数据结构和数据查询,前端可以方便的根据自己的需要自由组合、查询、更新、删除数据。

3. 标准化

GraphQL 提供了强类型系统,所有数据类型均通过 Schema 的方式来定义,并且服务端的响应也遵循对象类型定义。因此合同开发人员能够更容易地与客户端工程师进行沟通。

GraphQL 的应用场景

由于 GraphQL 具有灵活、精简、标准化等优点,因此 在以下场景经常使用 GraphQL。

数据驱动的应用

对于数据输入高,并且复杂的应用程序,以及那些需要纵向导航大量组合数据的应用程序,GraphQL 的数据询问语言等属性尤为适用。此类应用程序包括:多层次的关系、网格数据等复杂场景。

前端应用

GraphQL 相较于 REST API 的优势使其在开发前端应用上优势明显。前端应用通常需要更高的速度和更少的延迟,而 REST API 所提供的数据结构和数据查询往往会增加浏览器访问数据的延迟,而GraphQL通常可以显著减少数据请求数量,减少数据/查询的大小,提高应用性能。

总结

GraphQL 是一种用于 API 开发的查询语言和运行时,它基于标记语言而非 URL 并且通过 Schema 定义数据结构。GraphQL 相对于 RESTful API 有着更为灵活、精简、标准化等多方面的优势,使得 GraphQL 的应用场景越来越多。

如果你是前端工程师,我相信你一定会因为 GraphQL 的优势而越来越认可它,并做出自己的选择。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64a1531148841e9894d9992b


猜你喜欢

  • CSS Flexbox 详细讲解

    CSS Flexbox 是一种响应式设计的布局模式,使得页面的布局可以更加自由和灵活。通过对 Flexbox 的学习,你将能够更好地掌握响应式设计的技巧,同时也将在前端开发中更加自如。

    1 年前
  • 解决 Babel 编译箭头函数后 this 指向问题

    随着 ES6 的推广,箭头函数越来越常见。然而,箭头函数会改变 this 的指向,这可能会导致一些难以理解的错误。本文将介绍如何解决 Babel 编译箭头函数后 this 指向问题。

    1 年前
  • RxJS 实战:使用 Subject 创建可复用的数据流处理模块

    前言 RxJS 是一个基于观察者模式的 JavaScript 库,可以处理异步和事件驱动的程序,极大地简化了代码的复杂性,提高了代码的可读性和可维护性。 在前端开发中,很多场景需要处理数据流,比如用户...

    1 年前
  • Node.js 和 Socket.io 实现实时数据可视化监控

    在现代互联网应用中,实时的数据可视化监控已经成为了必要的技术手段,尤其对于前端开发人员而言更是重要。本文将介绍如何使用 Node.js 和 Socket.io 实现实时数据可视化监控,可以在 Web ...

    1 年前
  • 基于 Enzyme 实现 React 组件的性能测试与优化

    React 是一个性能出色的前端框架,它采用了 Virtual DOM,通过智能的比较算法来减少 DOM 操作,从而优化了性能。不过在实际开发过程中,由于各种因素的干扰,我们的 React 组件的性能...

    1 年前
  • 7 种 CSS Reset 样式表的比较分析

    在进行前端开发时,我们经常需要使用样式表来美化页面的布局和外观。但是,不同的浏览器对 CSS 的解析方式有所不同,这会导致元素的外观在不同浏览器中出现差异。为了解决这个问题,我们可以使用 CSS Re...

    1 年前
  • Deno 中如何使用正则表达式?

    在 Deno 中,我们可以使用 JavaScript 内置的正则表达式(RegExp)对象来进行字符串匹配和替换等操作。正则表达式是一种强大的工具,可以帮助我们快速有效地处理文本。

    1 年前
  • 解决 React Native SPA 应用在 Android 下使用 Webview 时闪退问题

    React Native 是一个跨平台的开发框架,允许开发者使用 JavaScript 和 React 构建原生应用。在 React Native 应用中,我们有时会使用 WebView 来嵌入 We...

    1 年前
  • 如何使用 Cypress 进行端到端测试

    Cypress 是一个基于 JavaScript 的端到端测试框架,其具有简单易用、快速稳定、自带断言等优点,能够帮助我们更加高效地进行前端测试工作。在本文中,我们将通过详细的指导和示例代码,介绍如何...

    1 年前
  • 使用 Web Components 开发移动端 H5 页面

    Web Components 是一种让开发者可以创建自定义 HTML 标签的技术,它包括了四种技术:Custom Elements、Shadow DOM、HTML Templates 和 HTML I...

    1 年前
  • 如何利用 JS 实现无障碍操作及导航功能

    无障碍操作是让所有用户都可访问和使用网站的一种设计概念。无障碍操作涉及到多种方面,其中包括视力受损和听力受损用户、残障人士、老年人和其他用户。本文将探讨如何使用 JavaScript 实现无障碍操作和...

    1 年前
  • 使用 Headless CMS 进行电子商务开发需要注意的事项

    什么是 Headless CMS? Headless CMS 是指无头 CMS,也就是一个去掉了前端界面(head)的 CMS。它只提供了基础的内容管理功能,将数据存储在服务器中,在前端开发中通过 A...

    1 年前
  • ES8 标准中的新增性能指标实现

    ES8 标准中的新增性能指标实现 ES8 标准中新增了一些有关性能的指标实现,包括了 SharedArrayBuffer、Atomics 等内容。在本文中,我们将详细解释这些新增功能的作用,以及如何在...

    1 年前
  • SSE 常见问题解答:跨域访问、性能优化等

    什么是 SSE? SSE(Server-Sent Events),简称服务器推送事件,是一种基于 HTTP 的服务器推送技术。SSE 可以让浏览器自动接收来自服务器的更新事件,从而实现实时更新页面内容...

    1 年前
  • Serverless 框架用于处理 Kafka 流数据的技术教程

    介绍 Kafka 是一种开源分布式流处理平台,可以处理实时数据流,使得数据在集群内部进行处理和存储。这种平台常用于实时数据的处理和分析,例如日志处理、流量分析等等。

    1 年前
  • 在 PWA 开发中如何解决缓存问题

    什么是 PWA? PWA 是 Progressive Web App 的缩写,是一种新型的跨平台 Web 应用开发模式。它将现代 Web 应用和原生应用的技术特点相结合,最终达到用户体验和 Web 应...

    1 年前
  • 利用 Chai 和 Sinon 实现 Mock 测试的教程

    在前端开发过程中,Mock 测试是一项非常重要的技术。一方面,它可以避免对实际数据造成影响,另一方面,它也提供了一种快速、可控的测试方式。本文将介绍如何使用 Chai 和 Sinon 这两个库来实现 ...

    1 年前
  • SASS 与 CSS 差异之处,如何避免在编写样式时出现错误

    SASS 与 CSS 差异之处,如何避免在编写样式时出现错误 在前端开发中,CSS 是必不可少的一部分。而随着项目复杂度的增加,CSS 的编写也越来越具有挑战性。此时,使用预处理器来处理 CSS 的就...

    1 年前
  • 前后端分离实践:React+Next.js 和 Node.js+MongoDB

    在当今互联网时代,前后端分离已经成为了一个不容忽视的趋势。前后端分离可以将前端和后端的开发分离开来,各自独立开发,减少了团队间的依赖,提高了开发效率。在这篇文章中,我将会讲解如何用 React+Nex...

    1 年前
  • Angular 服务端渲染实践:提高应用 SEO 性能

    前言 在今天的前端开发中,SPA (Single Page Application) 已经成为了一个很常见的架构。SPA 的特点是:所有的资源,包括 HTML、CSS、JS 等静态资源都通过一次网络访...

    1 年前

相关推荐

    暂无文章