前言
在前端开发中,我们经常需要从服务器上获取数据。GraphQL 是一种流行的 API 查询语言和运行时环境,它允许客户端只请求需要的数据。然而,在实际中我们经常要处理大量的网络请求,这样会使得网络传输费用增加、时间延长、网络负载加剧等问题,这时候就需要缩小网络传输及提升缓存的效率了。 本文将要介绍如何使用 npm 包 apollo-link-persisted-queries 对数据进行缓存、缩小网络传输,提升页面的渲染速度。
apollo-link-persisted-queries 简介
apollo-link-persisted-queries 是一个适用于 Apollo GraphQL 客户端的链接器,该链接器允许客户端在发送请求时仅发送查询标识符,以及服务器只需返回缓存过的查询,从而优化网络传输并减少查询错误率。apollo-link-persisted-queries 将查询的代码合并到服务端端,使得服务器端能进行缓存管理和避免请求超高,从而缩小网络传输量和数据响应时长,从而减轻了服务器负担。
apollo-link-persisted-queries 的使用
安装
在项目中安装 apollo-link-persisted-queries ,可以使用 npm 或者 yarn 。
npm
npm install apollo-link-persisted-queries --save
yarn
yarn add apollo-link-persisted-queries
使用
在 Apollo GraphQL 客户端中使用 apollo-link-persisted-queries需要先构造一个 graphql 服务器,然后使用 ApolloClient 来创建并配置链接器链,具体步骤如下:
1. 构造 graphql 服务器
首先,我们将先创建一个 GraphQL 服务器,以下是一个 Express REST API 服务器的例子,用于连接到模拟 graphql
端点:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - ------------- --- - - --------------------------------- ----- --- - ---------- ----- -------- - ---- ---- ----- - ------ ------ - -- ----- --------- - - ------ - ------ --------- ------ --------- ------ -- ------- -------- -- -- ----- ------ - --- -------------- --------- --------- --- ------------------------ ---- ----- ---------- --- ------------ ----- ---- -- -- -- --------------- ------ ----- -- -------------------------------------------- --展开代码
2. 创建 client
使用 apollo-link-persisted-queries
对 ApolloClient 进行初始化,在创建 ApolloClient
时, 需要在 links
中添加 apollo-link-persisted-queries
-- -------------------- ---- ------- ------ - ------------- --------- ------------- - ---- ----------------- ------ - ------------------------ - ---- -------------------------------- ----- -------- - --- ---------- ---- ---------- --- -- --------- ---- --- ---- ------- ------ ----- ------------------ - --------------------------- ----- ------ - --- -------------- ----- ------------------------------------ ------ --- ---------------- ---展开代码
上述代码所示的链接器定义将在进行查询之前检查连接是否包含查询语句。如果查询没有被缓存,链接就会强制它缓存查询, 然后发送一个查询ID而不是查询字符串。使用缓存的请求还需要追加一个灰度指数,以支持查询变更。默认情况下,灰度指数会从环境变量中提取。
现在我们已经配置好 client
,我们可以在 Vue 或 React 中使用它来下发请求。
以下是一个响应式 vue-apollo
客户端的例子:
-- -------------------- ---- ------- ------ - -------------------- - ---- --------------------- ------ - ------------- --------- ------------- - ---- ----------------- ------ - ------------------------ - ---- -------------------------------- ------ --- ---- ------ ------ --- ---- ------------ ----- -------- - --- ---------- ---- ---------- --- ----- ------------------ - --------------------------- ----- ------ - --- -------------- ----- ------------------------------------ ------ --- ---------------- --- ----- -------------- - ---------------------- -------------- ------- --- --- ----- --- ------- --------------- ------- --- -- ------- ---展开代码
结论
本文我们介绍了 apollo-link-persisted-queries 的使用,这是一个用于 Apollo GraphQL 客户端的链接器,可优化网络传输并缩小数据的传输量,从而提升页面的渲染速度。它的使用方法也比较简单,只需要在创建 ApolloClient 时加入链接器就可以了。希望本文对大家在前端开发工作中有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f16bb76403f2923b035c397