GraphQL:简介
GraphQL 图片来源:
我们将探索GraphQL 的基础知识,并学习如何使用Apollo将其与 React 和 React Native 等前端框架连接起来。这将帮助您了解如何使用 GraphQL、React、React Native 和 Apollo 构建现代、高效的应用程序。
什么是 GraphQL?
GraphQL 是一种API 查询语言。它由 Facebook 开发,作为一种更有效地获取数据的解决方案。
为什么选择 GraphQL?
GraphQL 之前
- REST API(表述性状态转移应用程序编程接口)是一种允许不同软件系统进行通信的标准化方式。
在 REST API 中,每个端点都会返回特定的 JSON 数据负载。即使我们只需要某些字段,它也会在每个请求中返回所有内容。
检索产品列表
- HTTP 方法: GET
- 端点(Endpoint):
/api/products - 描述:检索所有产品的列表。
Request::
GET /api/products/1
Response:
[{"id": 1,"name": "Laptop","price": 999.99,"category": "Electronics","description": "A high-performance laptop suitable for all your computing needs.","manufacturer": "TechCorp","stock": {"quantity": 50,"warehouseLocation": "Warehouse A"},"specifications": {"processor": "Intel Core i7","ram": "16GB","storage": "512GB SSD","screenSize": "15.6 inches"},"images": ["https://example.com/images/laptop1.jpg","https://example.com/images/laptop2.jpg"],"ratings": {"average": 4.5,"count": 120},"reviews": [{"userId": 101,"rating": 5,"comment": "Excellent laptop for work and play.","date": "2023-06-15"},{"userId": 102,"rating": 4,"comment": "Great performance but a bit pricey.","date": "2023-06-20"}]},{"id": 2,"name": "Smartphone","price": 599.99,"category": "Electronics","description": "A sleek and powerful smartphone with the latest features.","manufacturer": "PhoneInc","stock": {"quantity": 200,"warehouseLocation": "Warehouse B"},"specifications": {"processor": "Snapdragon 888","ram
此外,REST API 的设计可能要求应用程序发出大量不必要的请求,因为某些数据可能来自不同的端点。
这意味着,为了检索有关特定数据,您需要发出不同的 HTTP 请求。
随着用户对更快、更高效的应用程序的需求不断增长,Facebook 认识到 REST API 中的这些问题。
2012 年,该公司开始内部开发 GraphQL,并于 2015 年向公众发布
GraphQL 如何工作?
如上所述;它是一种查询语言,这意味着它仅使用查询获取您需要的数据。
使用 GraphQL :
- 只需管理较少的端点
/graphql - 灵活地与数据库、REST API、云服务和 JSON 文件集成

典型的 GraphQL 操作如下:
- 通过查询从 GraphQL 服务器请求数据。
- 在 GraphQL 服务器上调用一个函数来从适当的源获取数据。
- GraphQL 服务器向客户端返回响应。
GraphQL 附带一个名为 GraphiQL 的 IDE,有助于开发人员测试 API。
Visual Studio 代码的 GraphQL 扩展
GraphQL 的主要功能
声明式数据获取:客户端指定所需数据的形状和大小。避免过度获取(检索比所需更多的数据)和获取不足(检索比所需更少的数据)。
单一端点:与需要为不同资源设置多个端点的 REST 不同,GraphQL 使用单一端点来访问所有数据。
强类型模式:模式定义了可以查询的数据类型以及它们之间的关系。
订阅的实时数据:客户端可以订阅数据变化并实时接收更新。
GraphQL 查询的基本结构
这是一个用于获取产品的简单 GraphQL 查询:
通过 ID 获取单个产品:
GraphQL 查询:
query {product(id: 1) {idnamepricecategorydescription}
}
JSON 请求:
{"query": "query { product(id: 1) { id name price category description } }"
}
响应示例:
{"data": {"product": {"id": 1,"name": "Laptop","price": 999.99,"category": "Electronics","description": "A high-performance laptop suitable for all your computing needs."}}
}
添加新的、更新或产品(变更):
GraphQL 变更:
mutation {addProduct(input: {name: "Tablet",price: 299.99,category: "Electronics",description: "A lightweight tablet with a long battery life."}) {idnamepricecategorydescription}
}
JSON 请求:
{"query": "mutation { addProduct(input: { name: \"Tablet\", price: 299.99, category: \"Electronics\", description: \"A lightweight tablet with a long battery life.\" }) { id name price category description } }"
}
响应示例:
{"data": {"addProduct": {"id": 3,"name": "Tablet","price": 299.99,"category": "Electronics","description": "A lightweight tablet with a long battery life."}}
}
更新 JSON 请求
{"query": "mutation { updateProduct(id: 1, input: { name: \"Laptop\", price: 1099.99, category: \"Electronics\", description: \"An updated high-performance laptop with additional features.\" }) { id name price category description } }"
}
响应示例:
{"data": {"updateProduct": {"id": 1,"name": "Laptop","price": 1099.99,"category": "Electronics","description": "An updated high-performance laptop with additional features."}}
}
如何将 GraphQL 与 JSON 结合使用
定义模式:创建一个模式来定义 API 中可用的类型和字段。
设置服务器:使用 Apollo Server 或 Express GraphQL 等服务器库来处理请求。
发送查询/变异:使用 GraphiQL、Apollo Client 或 HTTP 客户端(例如 Postman、cURL)等工具以 JSON 格式发送查询和变异
处理响应:处理来自服务器的 JSON 响应,其中包括请求的数据或变异操作的确认。
GraphQL 能够处理复杂的查询并以 JSON 格式返回精确的数据,这使其成为传统 REST API 的强大替代品,能够实现更高效、更灵活的数据获取。
相关文章:
GraphQL:简介
GraphQL 图片来源: 我们将探索GraphQL 的基础知识,并学习如何使用Apollo将其与 React 和 React Native 等前端框架连接起来。这将帮助您了解如何使用 GraphQL、React、React Native 和 Apollo 构建现代、高效的应用程序。 什么是 GraphQL?…...
AI大模型安全挑战和安全要求解读
引言 随着人工智能技术的飞速发展,大模型技术以其卓越的性能和广泛的应用前景,正在重塑人工智能领域的新格局。然而,任何技术都有两面性,大模型在带来前所未有便利的同时,也引发了深刻的安全和伦理挑战。 大模型&…...
前端面试题-token的存放位置
哈喽小伙伴们大家好,本系列是一个专门针对前端开发岗的面试题系列,每周将会不定期分享一些面试题,希望对大家有所帮助. 面试官:token 一般在客户端存在哪儿 求职者:Token一般在客户端存在以下几个地方: (1)Cookie:Token可以存储在客户端的Cookie中。服…...
深入探讨计算机网络中的各种报文
在计算机网络中,报文(Packet)是数据传输的基本单位。不同的协议使用不同类型的报文来实现数据传输的各种功能。本文将详细探讨计算机网络中常见的几种报文类型,并通过举例说明其具体应用。 一、TCP/IP协议栈中的报文 TCP/IP协议…...
Debezium系列之:Mysql和SQLServer数据库字段类型覆盖测试
Debezium系列之:Mysql和SQLServer数据库字段类型覆盖测试 一、需求背景二、类型对比三、完整流程三、Mysql数据库全字段类型覆盖测试四、SQLServer数据库字段类型覆盖测试一、需求背景 Debezium版本升级迭代,要做字段类型测试,确保版本间字段类型的差异下游能够自动适应,或…...
Mathtype7在Word2016中闪退(安装过6)
安装教程:https://blog.csdn.net/Little_pudding10/article/details/135465291 Mathtype7在Word2016中闪退是因为安装过Mathtype6,MathPage.wll和MathType Comm***.dotm),不会随着Mathtype的删除自动删除,而新版的Mathtype中的文件…...
SQL面试题练习 —— 合并用户浏览行为
目录 1 题目2 建表语句3 题解 1 题目 有一份用户访问记录表,记录用户id和访问时间,如果用户访问时间间隔小于60s则认为时一次浏览,请合并用户的浏览行为。 样例数据 ------------------------ | user_id | access_time | ---------------…...
【Docker】docker 替换宿主与容器的映射端口和文件路径
every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 docker 替换宿主与容器的映射端口和文件夹 1. 正文 1.1 关闭docker 服务 systemctl stop docker1.2 找到容器的配置文件 cd /var/lib/docker/contain…...
GPU算力租用平台推荐
推荐以下几家GPU算力租用平台: 1. AWS (Amazon Web Services) EC2 - AWS提供多种GPU实例,适合不同的计算需求,如机器学习、深度学习和图形渲染等。 - 优点:全球覆盖面广,稳定性高,服务支持全面。 …...
定个小目标之刷LeetCode热题(31)
238. 除自身以外数组的乘积 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。请 不要使用除法&#…...
我在高职教STM32——LCD液晶显示(3)
大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正因如此,才有了借助 CSDN 平台寻求认同感和成就…...
uniapp横屏移动端卡片缩进轮播图
uniapp横屏移动端卡片缩进轮播图 效果: 代码: <!-- 简单封装轮播图组件:swiperCard --> <template><swiper class"swiper" circular :indicator-dots"true" :autoplay"true" :interval"10000&quo…...
整合Spring Boot和Apache Solr进行全文搜索
整合Spring Boot和Apache Solr进行全文搜索 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在现代应用开发中,全文搜索是许多应用不可或缺的功能之…...
网络治理新模式:Web3时代的社会价值重构
随着Web3技术的崛起,传统的网络治理模式正在经历革新,这不仅仅是技术的进步,更是对社会价值观念的挑战和重构。本文将深入探讨Web3时代的网络治理新模式,其背后的技术基础、社会影响以及未来的发展方向。 1. 引言 Web3时代&#…...
[个人感悟] MySQL应该考察哪些问题?
前言 数据存储一直是软件开发中必不可少的一环, 从早期的文件存储txt, Excel, Doc, Access, 以及关系数据库时代的MySQL,SQL Server, Oracle, DB2, 乃至最近的大数据时代f非关系型数据库:Hadoop, HBase, MongoDB. 此外还有顺序型数据库InfluxDB, 图数据库Neo4J, 分布式数据库T…...
《数据结构与算法基础》学习笔记——1.2基本概念和术语
一、本章结构 二、四个数据相关专业名词的解释 两者的区别 三、数据结构相关内容 四、逻辑结构的分类 五、存储结构的分类及四种基本存储结构...
Java之线程相关应用实现
后台线程 一个进程中只有后台进程运行,该进程将会结束。 新创建的线程默认为前台线程,Java中只要有一个前台线程运行,就不会结束程序,如果只有后台线程运行,程序就会结束,可以在线程对象启动前执行setDae…...
一加全机型TWRP合集/橙狐recovery下载-20240603更新-支持一加12/Ace3V手机
TWRP是目前安卓平台的刷机神器,可快速刷写第三方ROM或官方系统,刷入TWRP之前需要解锁BL,目前已适配一加多个机型。ROM乐园小编20240603整理,涵盖一加1到一加Ace3V多机型专用TWRP文件,个人机型橙狐recovery适配相对完整…...
小伙子知道synchronized的优化过程吗
synchronized优化 背景:synchronized最初作为Java中的重量级锁,开销大,不被推荐使用。优化:随着JDK的发展,特别是JDK1.6以后,synchronized经历了优化,现在广泛应用于JVM源码和开源框架。 对象…...
鸿蒙面试心得
自疫情过后,java和web前端都进入了冰河时代。年龄、薪资、学历都成了找工作路上躲不开的门槛。 年龄太大pass 薪资要高了pass 学历大专pass 好多好多pass 找工作的路上明明阳关普照,却有一种凄凄惨惨戚戚说不清道不明的“优雅”意境。 如何破局&am…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
