GraphQL 的设计思想和架构

GraphQL 是一种用于 API 开发的查询语言和运行时环境,由 Facebook 在 2012 年首次提出。它采用了一种声明式的方式定义 API 的输出数据结构,使得客户端能够更加精准地获取所需数据,从而降低了数据获取的成本和网络传输量。

设计思想

GraphQL 的设计思想可以总结为以下几个方面:

1. 精确地描述数据需求

GraphQL 采用了以查询为中心的数据获取方式,即客户端会发出一个查询请求,服务端则返回该查询所需的数据。这种方式与传统的 RESTful API 的方式有所不同,RESTful API 的数据获取方式是针对资源的,一般需要根据访问路径的不同获取到不同的资源。

因此,GraphQL 可以精确地描述客户端所需的数据结构和数据格式,避免了客户端端需要进行多次请求和处理的情况,提高了效率和开发速度。

2. 强类型系统

GraphQL 具有强类型系统的特点,即定义了丰富的数据类型和结构,这些类型和结构可以在定义 Schema 时进行定义,并在运行时进行验证。这样做可以在一定程度上减少程序运行时的错误和不可预期情况。

3. 集成性

GraphQL 并不是一个完整的解决方案,它只是一种查询语言和底层实现的接口规范,因此可以和其他语言和框架进行集成和使用。

架构

GraphQL 的架构可以分为三层:Schema 层、服务层和执行层。

Schema 层

在 GraphQL 中,Schema 层是定义类型、方法、参数、返回值及其他元数据的核心部分。它定义了客户端与服务端之间数据的格式、交互方式及校验规则。

GraphQL Schema 有如下几个部分组成:

1. Query

Query 类型是 GraphQL 中的一个必需类型,定义了客户端可以查询的 API 的入口。它通常包含与某项查询相关的字段和参数,以及该查询需要返回的数据结构。

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

2. Mutation

Mutation 类型描述了可以修改数据的操作,例如添加、更新或删除数据。Mutation 与 Query 类型类似,但它们主要用于修改数据而非仅仅查询数据。

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

3. Subscription

Subscription 类型定义了客户端可以订阅的实时事件,例如 Websocket 连接状态、新消息、用户在线状态等。GraphQL 通过使用 Async Iterator 将这些事件实现了长连接能力,开发者可以定义触发事件的源头。

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

4. Enum

Enum 类型定义了可选取的值集合,例如媒体类型、产品类型等。

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

5. Input

Input 类型定义了传递给 Mutation 或 Field 的数据参数。输入对象不同于 Query 和 Mutation,它仅包含字段参数,不包含查询条件。

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

6. Type

Type 类型定义了包括自定义类型、接口和联合类型在内的复杂数据类型。例如,User 和 Book 就是自定义类型。

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

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

服务层

服务层是 GraphQL 程序的核心工作,它通常包含 Query、Mutation、Subscription 的实现代码,并负责与数据库或其他 API 进行交互。

GraphQL 的服务层可以由任何编写 API 的服务端语言编写,例如 Python、Node.js、Java 等。

执行层

执行层是处理客户端发来的请求并返回响应的组件,它根据客户端的请求,定位并执行相应的 Query 或 Mutation,并通过服务层与后端进行交互。

执行层还需要校验查询请求的语法和结构,并在服务层执行时负责输入和输出的序列化和反序列化。

示例代码

GraphQL 示例代码如下:

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

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

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

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

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

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

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

使用 Node.js 的实现代码示例如下:

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

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

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

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

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

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

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

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

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

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

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

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

学习和指导意义

GraphQL 与传统的 RESTful API 相比,具有更高的开发效率、更灵活的数据获取方式和更好的 API 安全性等优点。它的设计思想和具体实现方式值得前端工程师学习和研究。

在实际开发中,GraphQL 可以更加精确地满足客户端需求,降低请求次数和网络传输量,提高效率和用户体验。同时也可以帮助开发团队提升 API 的可维护性和可扩展性,降低后续维护和开发成本。

在学习和使用 GraphQL 时,开发者需要掌握其基本原理、使用方法和一些常见问题和解决方案。同时也需要了解其实现细节和最佳实践,才能更加灵活和高效地应用到实际项目中。

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


猜你喜欢

  • Vue.js 2.0 中的路由钩子函数及其应用场景

    在 Vue.js 2.0 中,路由钩子函数(route hooks)是非常有用的功能之一。它们提供了一种在路由切换期间执行代码的方式,并且可以用于很多场景,比如验证用户权限、预处理数据等。

    1 年前
  • 如何使用 Chai 测试代码的异常

    简介 在前端开发中,我们总会遇到一些异常情况,比如网络中断、服务器错误、用户输入错误等等。如何准确地捕捉和处理这些异常情况,是我们需要面对的一个问题。 Chai 是一个支持多种断言风格的 JavaSc...

    1 年前
  • 使用 ES12 中的 WeakRef 实现高效的前端缓存

    引言 在前端开发过程中,常常需要使用缓存技术来提高页面性能和用户体验。然而,传统的缓存方式往往会带来很多问题,比如内存占用过高、缓存过期后无法自动清除等等。ES12 中新增的 WeakRef 对于前端...

    1 年前
  • PWA 中如何实现应用内广告推送

    PWA 中如何实现应用内广告推送 随着移动互联网的发展,越来越多的网站开始向 PWA(Progressive Web Apps) 转移。PWA 不仅可以提供更好的用户体验,还可以通过缓存实现离线访问。

    1 年前
  • CSS Flexbox 实现较为复杂的响应式布局

    前言 在响应式布局中,利用 CSS Flexbox 可以方便并且高效地实现布局。本文将介绍如何使用 CSS Flexbox 实现较为复杂的响应式布局,并针对相关的概念、属性、技巧进行详细的深入讲解。

    1 年前
  • Mocha 报错 TypeError:Cannot read property 'length' of undefined 问题的解决方案

    问题描述 当我们使用 Mocha 进行前端自动化测试的过程中,有时会遇到一个报错信息:TypeError:Cannot read property 'length' of undefined。

    1 年前
  • Cypress 自动化测试实战:进阶篇

    Cypress 是一款现代化的前端自动化测试工具,它具有简单易用、快速稳定等特点,在前端开发中得到了广泛的应用。本文将从进阶的角度对 Cypress 进行实战讲解,包括页面操作、网络请求、测试流程控制...

    1 年前
  • 如何使用 LESS 和 Gulp 实现自动化编译

    在前端开发中,我们常常需要编写 CSS 样式。而使用 LESS 可以让 CSS 更易于维护和扩展。但是,每次修改 LESS 文件后,我们都需要手动编译成 CSS 文件,这样非常不便。

    1 年前
  • 如何在 WordPress 上使用 Headless CMS

    Headless CMS 是一种将内容管理和呈现分离的 CMS 架构,前端开发人员可以使用自己喜欢的技术来呈现内容,而不需要依赖后端。在移动应用、网站、IoT 设备等各个领域中,Headless CM...

    1 年前
  • Koa.js 如何配置 HTTPS 协议?

    HTTPS 协议是一种网络安全传输协议,可在传输过程中对数据进行加密和身份认证,保护数据不被窃取和篡改。在 Web 开发中,配置 HTTPS 协议可以有效提升网站的安全性,同时也能增加用户对网站的信任...

    1 年前
  • Next.js 中如何使用 socket.io 实现实时通信?

    在现代的 web 应用中,实时通信已经成为了很常见的需求,比如在线聊天、实时协作等等。常规的 HTTP 请求无法满足客户端与服务器之间实时通信的需求,因此需要使用 WebSocket 或者 Socke...

    1 年前
  • React Native 中实现 Android 和 iOS 的原生导航栏

    React Native 是一种跨平台开发框架,可以让开发者使用 JavaScript 进行 Android 和 iOS 应用程序的开发,无需区分操作系统。在开发中,我们经常需要在应用中添加导航栏以提...

    1 年前
  • Mongoose 中虚拟属性和普通属性的区别及应用场景

    前言 Mongoose 是 Node.js 上非常受欢迎的 MongoDB ODM,能够帮助我们更方便的在 JavaScript 中操作 MongoDB。虚拟属性是 Mongoose 中非常强大的功能...

    1 年前
  • 使用 Jest 测试 React Native 应用

    在开发 React Native 应用时,测试是必不可少的一部分。而测试框架 Jest 提供了一个方便易用的方式来编写测试代码。本文将介绍如何使用 Jest 测试 React Native 应用,在测...

    1 年前
  • 了解 ES11 中的可选链操作符,解决 JavaScript 对象嵌套查询的问题

    背景 在前端开发中,常常需要处理嵌套对象的数据,比如从后端接口取回的数据,可能会有多层嵌套的对象,而我们需要查询其中的某个属性。在 JavaScript 中,我们可以用 . 运算符来访问对象属性,如 ...

    1 年前
  • Redux 中如何防抖节流优化性能?

    在前端开发中,优化性能是一项基本任务。而在使用 Redux 进行状态管理时,处理好防抖和节流问题更是必不可少。在本文中,我们将介绍 Redux 中如何防抖节流优化性能,并提供示例代码。

    1 年前
  • AngularJS SPA 应用中如何使用 UI Router 实现复杂路由

    AngularJS 是目前前端开发中非常流行的一个 JavaScript 框架,它的出现,为前端开发提供了更加高效、便捷的开发方式。在 AngularJS 中,UI Router 是一个非常重要的组件...

    1 年前
  • 使用 Angular 获取 DOM 元素及其属性的方法

    引言 在 Web 开发中,经常需要通过 JavaScript 操作 DOM 元素获取元素属性的值。Angular 是前端开发中广泛使用的一种框架,它提供了一些便捷的方法来获取 DOM 元素及其属性,下...

    1 年前
  • 使用 Stencil.js 构建 Web Components 时需要注意的问题

    什么是 Stencil.js Stencil.js 是一款基于 Web Components 标准的轻量级组件库,它的目标是提供一种简单、高效、可重用的构建 Web Components 的方式,通过...

    1 年前
  • 多核 CPU 系统中的高性能编程技术

    前言 随着计算机硬件的发展,CPU 已经从单核逐渐发展到多核,这使得计算机的性能得到了极大的提升。但是,在编程领域,如何充分利用多核 CPU 的性能仍然是一个无法回避的问题。

    1 年前

相关推荐

    暂无文章