前言
@wdimiceli/apollo-client 是一款适用于 React 和 React Native 的 Apollo 客户端扩展包，可以让开发者更灵活地使用 GraphQL 查询和变更带有 Apollo 缓存指令的 GraphQL API。在本文中，我们将详细讲解 @wdimiceli/apollo-client 的使用方法和技巧。
前置条件
在开始使用 @wdimiceli/apollo-client 之前，你需要先了解以下内容：
- GraphQL 的基本概念和语法
- React 和 React Native 的基本概念和语法
- Apollo Client 的基本概念和语法
安装 @wdimiceli/apollo-client
在项目中使用 @wdimiceli/apollo-client 前，你需要先安装它。可以通过 npm 或 yarn 安装：
npm install @wdimiceli/apollo-client
或
yarn add @wdimiceli/apollo-client
创建 ApolloClient 实例
在使用 @wdimiceli/apollo-client 之前，你需要先创建一个 ApolloClient 实例。你可以在应用的入口处创建一个全局的 ApolloClient 实例，并将其传递给应用的根组件，也可以在子组件中创建一个 ApolloClient 实例。
以下是一个简单的示例，演示如何创建 ApolloClient 实例并将其传递给应用的根组件：
-- -------------------- ---- -------
------ - ------------- ------------- - ---- -----------------
------ - -------------- - ---- ---------------------------
----- ------ - --- --------------
---- ---------------------------------------
------ --- ----------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--在上面的示例中，我们创建了一个 ApolloClient 实例，其中 uri 是必需的，用于指定 GraphQL API 的地址。另外，我们还使用了 InMemoryCache，这是 Apollo Client 的默认缓存策略。最后，我们将 ApolloClient 实例传递给应用的根组件，即 <apolloprovider> 组件。
使用 Query 和 Mutation 组件
一旦创建了 ApolloClient 实例，你就可以使用 @wdimiceli/apollo-client 提供的 Query 和 Mutation 组件来进行查询和变更。
以下是一个使用 Query 和 Mutation 组件的示例，用于获取和修改一个 todo 列表：
-- -------------------- ---- -------
------ - ------ -------- - ---- ---------------------------
----- --------------- - ----
----- -------- -
----- -
--
----
---------
-
-
--
----- ----------------- - ----
-------- -------------- -------- -
------------- ------ -
--
----
---------
-
-
--
-------- ----- -
------ -
------ ------------------------
--- -------- ------ ---- -- -- -
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
--
----
-------------------- -- -
--- ------------------------------
---
-----
--------- -----------------------------
-------- -- -
-----
--------------- -- -
-----------------------
----- ---- - ------------------------
--------- ---------- - ---- - ---
----------------------- - ---
--
-
------ ----------- ----------- --
------- ----------------- -------------
-------
--
-----------
---
--
--
--------
--
-在上面的示例中，我们首先定义了一个 GET_TODOS_QUERY 查询，用于获取 todo 列表。然后，我们定义了一个 ADD_TODO_MUTATION 变更，用于添加一个新的 todo。接下来，我们将这两个查询和变更分别传递给了 <query> 和 <mutation> 组件，并在这些组件中定义了查询和变更的逻辑。
在 <query> 组件中，我们使用了 render prop 模式，根据不同的状态（loading、error 和 data）渲染不同的 UI。
在 <mutation> 组件中，我们使用了函数作为子组件的方式，这样可以让我们在表单提交时调用 addTodo 函数，并将表单中的文本作为变量传递给它。成功添加新的 todo 后，我们将表单中的文本清空，以便下次添加。
总之，使用 @wdimiceli/apollo-client 的 Query 和 Mutation 组件可以让你更容易地操作 GraphQL API，而不用过多关注底层的网络请求和缓存管理。
总结
@wdimiceli/apollo-client 是一款非常实用的 Apollo 客户端扩展包，可以帮助开发者更灵活地使用 GraphQL。在本文中，我们讲解了如何安装 @wdimiceli/apollo-client，并提供了一个完整的使用示例。通过使用 @wdimiceli/apollo-client 提供的 Query 和 Mutation 组件，你可以更轻松地操作 GraphQL API，并将精力集中于业务逻辑的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005701a81e8991b448e7d07