GraphQL 漫谈

本文将对 GraphQL 的概念及起源进行介绍,并提供详细的学习指导意义以及示例代码。

引言

GraphQL 是 Facebook 在2012年推出的一种数据查询语言,旨在解决 REST API 在多次请求时出现的问题,包括过度获取数据和数据结构不匹配。GraphQL 可以简化查询过程,减少超取数据,同时保持请求和响应之间的一对一联系。近年来,GraphQL 在前端领域越来越受欢迎,我们会在本文中深入探讨它。

概念

GraphQL 是一种由 Facebook 开发和开源的技术,旨在提高 API 的效率。它为客户端提供了更多的灵活性,并使 API 更加简单、可预测和可维护。GraphQL 通过定义类型、查询和变异,允许开发人员从 API 中提取所需的精确数据。

GraphQL 存在三种类型:

  1. Scalar types:标量类型,即原始类型,包括 String、Int、Float、Boolean 和 ID。
  2. Object types:对象类型由标量类型和其他对象类型组成。每个对象都有一组字段,这些字段可能是对象、标量类型或枚举类型。
  3. Enumeration types:枚举类型包括可以取一组固定值的标识符,如颜色、方向等。

GraphQL 的另一个特点是,与 REST API 不同,它不会返回完整的数据结构。客户端可以指定它需要的数据字段。GraphQL 使得前后端开发者能够更加有效地协调。

起源

GraphQL 是由 Facebook 设计的,初始版本是为了解决移动App上信息流的数据请求问题。

REST API 通过 HTTP 协议与客户端进行通信。但是,当客户想要获取不同的数据时,必须使用多个HTTP请求来获取不同的数据块。这会导致大量数据的传输和不必要的显示。随着应用程序界面的不断增长,这种方式不再是可执行或可优化的方案。

因此,在设计 GraphQL 时,Facebook 的工程师们将优化焦点转向了服务端对传输的数据的处理方式。GraphQL 还通过对查询进行分析并根据需要返回数据,显著增加了速度。

如何学习 GraphQL

要学习 GraphQL,首先要学会使用它,并熟悉开发中常用的操作和方法。

安装 GraphQL API

首先,你需要安装 GraphQL API。你可以使用现有的 GraphQL 服务来尝试,也可以使用框架自己设计 GraphQL API 然后使用自己的 API 进行实践。现在,我们选择一个免费的,名叫 GraphQLHub 的平台进行实践。

确定 Queries 和 Mutations

要使用 GraphQL,你需要了解 Queries 和 Mutations。Queries 是用于从服务端请求数据的操作,而 Mutations 是用于在服务端进行修改的操作。

查询操作可以运用以下格式:

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

查询操作可以带有参数,形如:

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

最后,Mutation 的格式类似于以下操作。

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

使用 GraphQL Playground

GraphQL Playground 是一个免费的开源工具,可用于在 Web 浏览器中玩耍 GraphQL。可以使用 Playground 查询数据,了解查询变化,数据处理的方法,甚至使用这个工具在框架内的实践。

示例代码

下面的示例代码展示了如何使用 GraphQL API 完成基本的查询操作。首先,我们需要使用 Node.js 环境,然后安装 graphql-request 和使用平台上的 GraphQL API。具体支持的平台可以使用 GraphiQL 或者其他类似的工具来查询。

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

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

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

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

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

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

结论

GraphQL 是一个强大的工具,可帮助前端和服务端开发人员快速创建 API。GraphQL 的主要优点是灵活性、可靠性和易于使用。随着它的普及,我们预计所有现代应用程序开发中都会使用 GraphQL,同时,这个技术也在不断发展和进步。希望本文对你对学习 GraphQL 有所帮助。

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


猜你喜欢

  • 如何在 LESS 中定义弹出框

    在前端开发中,弹出框常常被用来展示重要信息或进行用户操作。然而,在编写样式时,我们需要定义大量的CSS代码,以实现一个弹出框。这时,使用LESS可以帮助我们更方便地定义弹出框样式,并避免了大量重复的C...

    6 天前
  • React Native 中的导航实现与最佳实践

    React Native 是一种流行的跨平台移动应用程序开发框架,它的特点是使用 JavaScript 和 React 构建原生移动应用程序。React Native 中常常会涉及到导航的实现,它是一...

    6 天前
  • 使用 Jest 测试 GraphQL API 的最佳实践

    前端开发者在开发 GraphQL API 时,需要保证 API 的质量和稳定性,同时,测试 GraphQL API 也是必不可少的。使用 Jest 测试 GraphQL API 是一个不错的选择,它提...

    6 天前
  • Serverless VS 传统服务:哪种更优?

    作为前端开发者,我们通常会使用传统的服务模型来将我们的应用程序部署到服务器上。这种模型的好处是我们可以完全控制服务器,决定服务器上的资源如何分配,以及如何管理服务器的配置和安全性。

    6 天前
  • ES7 中的 Array.prototype.includes() 的背景和实践

    ES7(ECMAScript 2016)为 JavaScript 带来了一些新功能,其中一个有用的功能是 Array.prototype.includes() 方法。

    6 天前
  • 响应式设计对于您的电子商务网站的影响!

    在当今的数字时代,越来越多的用户使用不同尺寸和分辨率的设备访问网站,如智能手机、平板电脑、笔记本电脑和台式电脑等。在这种情况下,一种灵活的 Web 设计方法,即响应式设计(Responsive Des...

    6 天前
  • 如何使用 Hapi.js 和 WebSockets 构建实时网络应用程序?

    在现代网络编程中,实时网络应用程序变得越来越流行。我们可以利用 WebSockets 技术来构建实时通信的网络应用。本文将介绍如何使用 Hapi.js 和 WebSockets 构建实时网络应用程序。

    6 天前
  • Angular 中如何使用 Ant Design 组件库增强 UI 设计

    前言 Ant Design 是一款非常受欢迎的 UI 组件库,它包含了大量的组件,可以帮助我们快速构建出美观且易于使用的界面。而 Angular 是一款流行的前端框架,它提供了丰富的功能和便于使用的 ...

    6 天前
  • Web Components 的组件库与各种 UI 框架对比评测

    Web Components 是一种用于创建可重用组件的 Web 标准。它们允许您将组件封装起来,以便在多个项目中重用,而无需考虑实现的细节。这个特性使得 Web Components 成为前端工程师...

    6 天前
  • Fastify 应用程序中的文件上传进度条教程

    如果你正在开发一个需要文件上传功能的 web 应用程序,那么你可能会遇到一个非常棘手的问题:如何显示上传进度条以及如何在上传过程中处理它? 在本文中,我们将介绍如何使用 Fastify(一个高效、低开...

    7 天前
  • 30 天 JavaScript 实战第 13 天 -- Promise 异步编程技巧 ES6 篇

    前端开发中,异步编程是一项非常重要的技能,因为 HTML、CSS、JavaScript 等资源的文件加载、网络请求以及浏览器本身的事件都属于异步操作。在 JavaScript 中,我们可以使用回调函数...

    7 天前
  • 将 ECMAScript 2020 中的 Nullish Coalescing Operator 用于更好的代码维护

    在前端开发中,我们经常需要在代码中判断某个值是否为空,如果为空则使用默认值。在早期的 JavaScript 版本中,我们通常使用短路运算符来实现这个功能,例如: ----- -------- - --...

    7 天前
  • 如何使用 Mocha 进行 Express 应用程序测试

    Mocha 是一个流行的 JavaScript 测试框架,可以用于 Node.js 应用程序的单元测试和集成测试。在本文中,我们将介绍如何使用 Mocha 测试 Express 应用程序。

    7 天前
  • GraphQL 协议介绍及实战经验分享

    前言 GraphQL 是一种现代化的数据查询和操作协议,它由 Facebook 开发并于 2015 年首次公开发布。GraphQL 能够满足现代应用程序在数据查询和操作上的需求,使得前端开发人员更加高...

    7 天前
  • 使用 SASS 为 IE 兼容性写特定样式的注意事项

    在前端开发过程中,我们经常会遇到要为不同浏览器写特定的样式,其中最具有挑战性的就是兼容 IE 浏览器。为了提高效率和可维护性,我们可以使用 SASS 预处理语言来为 IE 浏览器编写特定的样式。

    7 天前
  • 使用 ES8 中的 promise.finally() 为每个异步请求添加 finally 处理程序

    在前端开发中,我们经常会遇到异步请求的情况,比如通过 Ajax 请求获取数据或者通过 Promise 等方式进行异步操作。有时候我们需要在请求结束后执行一些处理操作,例如清空表单、隐藏加载中的提示等等...

    7 天前
  • 使用 TypeScript 实现高质量的 React 应用程序

    前言 React 是一个非常流行的 JavaScript 库,它可以帮助开发者快速构建 Web 应用程序。但是,在开发大型 React 应用程序时,难免会有一些问题,例如类型错误、代码难以维护等。

    7 天前
  • RxJS 中的逆转操作符使用指南

    RxJS 是一个强大的库,可以为前端开发人员大大简化异步操作。在使用 RxJS 时,逆转操作符是非常有用的工具,可以用于将事件流逆转并操作流中的元素。本文将介绍 RxJS 中的逆转操作符,如何使用它们...

    7 天前
  • 在Fastify应用程序中使用YAML配置文件

    Fastify,是一个基于Node.js的高效开发框架,它的速度比大多数Web框架都要快。配置文件在服务器端应用程序开发中具有重要的作用,它可以帮助我们快速且方便地配置应用程序。

    7 天前
  • Headless CMS 在数字化医疗领域的应用场景探索

    在数字化医疗领域,随着技术的不断进步,越来越多的医疗机构开始使用 Headless CMS 技术来构建数字化应用。Headless CMS 技术允许开发者从传统的 CMS 模式中解脱出来,创造出更加灵...

    7 天前

相关推荐

    暂无文章