简介
taro-apollo 是一款基于 React 框架 Taro 的插件，用于将 Apollo 数据层和 Taro 框架深度融合，方便前端开发人员使用 GraphQL 进行数据交互。
安装
使用 npm 安装 taro-apollo：
npm install taro-apollo --save
使用
在 Taro 项目的 app.js 中引入 taro-apollo：
import { ApolloProvider } from 'taro-apollo'在 config/index.js 中进行 Apollo 配置：
-- -------------------- ---- -------
------- -
-------------- -
-------- -
---------------- -
---- ---------------------------------
-
-
-
-在页面组件中使用 ApolloProvider 包括需要渲染的组件：
const Index = () => {
return (
<ApolloProvider>
<View>Hello World!</View>
</ApolloProvider>
)
}之后便可以在该页面中正常使用 graphQL 请求数据：
-- -------------------- ---- -------
------ - ------- - ---- -------------
----- ----- - --------
----- ---- -
---- -
----
---
-
-
-
----- ---- - -- -- -
----- - ---- - - ---------------
------ -
----------- -- ----------------------
-
-示例代码
以下代码将获取 Github 的用户列表：
-- -------------------- ---- -------
------ ----- - -------- - ---- --------------
------ - ----- ------ - ---- --------------------
------ - ------- - ---- -------------
------ - -------- - ---- -------------------
------ - -------------- - ---- -------------
------ ------------ ---- --------------
------ --------------
----- --------------- - --------------------------------
----- -------------- - ------ -- -
----- - ------ ----- --------- - - ----
------ -
----- --------------------- ------------
------ --------------- ---------------------------- --
----- ---------------------------
----- ---------------------------------------------
----- -----------------------------------------------
-------
-------
-
-
----- ----- - -- -- -
----- -------- ---------- - --------------
----- - ----- ------ -------- --------- - - --------------------- -
---------- - ------ --
---------------------------- -----
------------ ----------
--
----- -------------- - -- -- -
-- --------- ------
----- ------- - ----------- -- ---------------------------------------------
-- --------- -
----- - --------- - - ---------------------------------
-----------
---------- - ------- --------- --
------------ ------------ - --------------- -- -- -
----- -------- - -----------------------------------------
----- -------- - --------------------------------------------
-----------------------------
------ -
------- -
---------------------
------------- -
----------------------------------
------ ----------------------------------------- -------------
--------
-
-
-
-
--
-
-
----- ----- - ----- -- ----------- -- ------------------------- - ----------------------------------------- -- ---------------- - --
------ -
----- ------------------
------ -- ----- -------------------------------- -----------------------
----------------- -- ----------------------
------- ---------------------------- ------------------------ ------------------------------------------------------------------ - ------------ - ----- ---------------
-------
-
-
----- --- - -- -- -
----- ------ - --- --------------
---- ----------------
-------- -
-------------- ------- ----------------------------
-
--
------ -
--------------- ----------------
------ --
-----------------
-
-
------ ------- ---
深度解析
ApolloProvider：
ApolloProvider是 Taro 应用中使用 Apollo 状态管理器的根组件。由于 Apollo 使用了 GraphQL 查询语言，这些查询需要发送到 GraphQL 服务器执行，并将结果同时存储在 Apollo Client 中以供使用。graphql：
graphql是一个高阶组件，它负责将 GraphQL 查询字符串和变量注入到 React 组件中。useQuery：
useQuery是一个 React 钩子函数，它使用状态管理库 Apollo 提供的query功能，从 GraphQL API 获取数据。它的返回值包括loading，error和client，以及由 Graphql 请求返回的实际 data。userQuery接受一个 GraphQL 模板字符串作为参数，从中生成具有适当选项的 GraphQL 查询，并返回包含执行结果的Promise结构。ApolloClient：
ApolloClient是一个基于缓存的大规模数据管理框架，它可以有效地管理您应用程序的数据层。该框架提供了一组工具和实用程序，可大大简化与 GraphQL 后端的集成过程，并支持如防止超查询、缓存完整性、类型安全等高度自定义的数据管理需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067381890c4f727758427d