[译] 怎样使用GraphQL - 进阶 - 1.客户端

news/2024/7/3 17:29:49 标签: ui, javascript, 前端

英文原版地址:https://www.howtographql.com/...

前端使用GraphQL API,对于抽象和实现基础功能,是一个好机会。让我们考虑你在应用中可能想要的一些“基础”功能:

  • 直接发送查询和mutation而不用构建HTTP请求
  • 视图层集成
  • 缓存
  • 基于schema去校验和优化查询

当然,没有什么可以阻止你仅使用HTTP来获取你的数据,然后自己逐个处理,直到正确的信息最终显示在UI上。 但是GraphQL提供了避免大量手动劳动的能力,让你专注于应用的核心部分! 在下文中,我们将更详细地讨论这些能力。

目前有两个主要的GraphQL客户端库。 第一个是Apollo客户端,这是一个社区支持的项目,旨在为所有主要开发平台构建强大而灵活的GraphQL客户端。 第二个被称为Relay,它是Facebook官方的GraphQL客户端,它大大优化了性能,但只能在web上可用。

直接发送查询和mutation

GraphQL的主要优点是它允许您以声明的方式获取和更新数据。换句话说,我们在API抽象层面更进一步,不必再自己处理低级网络任务。

以前你使用纯HTTP(如JavaScript中的fetch或iOS中的NSURLSession)从API加载数据。使用GraphQL后,所有操作都将写入一个查询,声明了数据需求后,让系统负责发送请求并处理响应。这正是GraphQL客户端要做的。

视图层集成和UI更新

在服务端的响应,被GraphQL客户端接收到之后,数据需要最终展现在UI中。根据开发的平台和选用的框架不同,UI更新也将会有不同的方式。

以React为例,GraphQL客户端使用高阶组件的理念来获取所需的数据,并使其在组件的porps中可用。一般来说,GraphQL的声明式特性与函数式反应型编程(FRP)结合的很好。两者可以形成强大的组合,其中视图只是声明其数据依赖,UI则与选择的FRP层连接。

缓存查询结果:概念和策略

在大多数应用中,你需要缓存之前从服务器获取的数据。这对于提供流畅的用户体验和维护好用户数据至关重要。

通常,当缓存数据时,直觉是将远程获取的信息放入本地存储中,以便稍后检索。使用GraphQL,直觉上的办法就是将GraphQL查询的结果简单地放入存储,并且只要再次执行完全相同的查询,就返回先前存储的数据。事实证明,这种方式对于大多数应用来说是非常低效的。

更有效的方式是提前规范化数据。这意味着(可能是)嵌套的查询结果会变得平坦,并且存储的是,可以使用全局唯一ID来查询的单个记录内容。如果想了解更多关于这一点的信息,Apollo博客对这个内容做了很好的介绍。

构建时的验证和优化

由于视图(schema)包含有关客户端可以使用GraphQL API的所有信息,因此,客户端在构建时验证查询就变得很方便。

当构建环境可以访问schema时,它可以基本解析位于项目中的所有GraphQL代码,并将其与schema中的信息进行比较。这样就可以捕获打字错误和其他错误,避免一些严重后果。

结合视图层和数据层

GraphQL的一个强大的理念是,它允许你并行地处理UI代码和数据需求。界面和数据的紧密结合,大大提高了开发人员的体验。不用再去考虑,如何在UI中恰当的填充数据。

结合带来的优势大小,取决于您正在开发的平台。例如在Javascript应用中,可以将数据依赖和UI代码放在同一个文件中。在Xcode中,Assistant Editor可用于同时处理视图控制器和graphql代码。


http://www.niftyadmin.cn/n/1478540.html

相关文章

认定的,就一直追求

对我来说,太明白奋斗对于我的生活的改变,太明白所有东西都是来之不易。看到爸妈的努力,我从来都认为所谓美好生活只有靠勤劳的双手,没有任何捷径。不羡慕不鄙夷,对于旁人的生活不需要在意,只是过好你当下的…

linux测试环境调测,测试环境的linux:要背的!!!

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼Linux网站搭建步骤1:上传安装包(包括jdk,tomcat,开发的网站程序, 数据库脚本)2. 解压jdk2:解压完毕后要自动出现#提示符,没有报任何错误3:设置JDK环境变量&…

android关于实现EditText中加多行下划线的的一种方法

1. 重写EditText 1 public class LinedEditText extends EditText {2 private Paint linePaint;3 private float margin;4 private int paperColor;5 6 public LinedEditText(Context paramContext, AttributeSet paramAttributeSet) {7 super(paramCo…

hdu 6034 贪心模拟 好坑

关键在排序&#xff01;&#xff01;&#xff01; 数组间的排序会超时&#xff0c;所以需要把一个数组映射成一个数字&#xff0c;就可以了 #include <bits/stdc.h> using namespace std;typedef long long ll; const int maxn 1e5 5; const ll Mod 1e9 7; int len,l…

Linux剩余信息保护怎么实现,保护Linux系统安全的九个常用方法

保护Linux系统安全的九个常用方法1.在以root身份登录时&#xff0c;避免做一些常规工作。这会减少你感染病毒的风险&#xff0c;并且可以防止你犯一些错误。2.如果可能的话&#xff0c;在一台远程机器上工作时&#xff0c;尽量使用加密连接。使用SSH来代替telnet、ftp、rsh、rl…

关于CASE中使用聚合函数时的一点经验

先不要管以下代码是完成什么功能--片段1selectcase when SUM(isnull(ACTVTY_DURTN,0))>1 then 1 else SUM(isnull(ACTVTY_DURTN,0)) end as DURTN,OWNR_EMP_ID_NKfrom dbo.ECMS_Activity_DIMN ACWHERE AC.APPT_STRT_DT_TZ BETWEEN 201208 AND 201209AND AC.actvty_main_type…

UnQLite简介

UnQLite是&#xff0c;由 Symisc Systems公司出品的一个嵌入式C语言软件库&#xff0c;它实现了一个自包含、无服务器、零配置、事务化的NoSQL数据库引擎。UnQLite是一个文档存储数据库&#xff0c;类似于MongoDB、Redis、CouchDB等。同时&#xff0c;也是一个标准的Key/Value存…

网页高度计算方法

document.compatMode(声明是转的&#xff0c;只是为了记下来&#xff0c;以后好用啊。嘿嘿) 对于document.compatMode&#xff0c;很多朋友可能都根我一样很少接触&#xff0c;知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用&#xff0c;感觉这个对…