随着前端技术的不断发展，前后端分离的开发模式变得越来越流行。前端需要与后端进行数据通信，而 GraphQL 已经成为越来越受欢迎的 API 查询语言。与此同时，Apollo 集成了 GraphQL 客户端和服务器端，为开发者提供了更为便捷的方案。
在使用 Apollo 客户端时，@etidbury/with-apollo 是一个非常有用的 npm 包。本篇文章将着重介绍该 npm 包的使用教程，包括安装、配置和使用。
安装
使用 npm 包管理器，在终端中执行以下命令即可安装该 npm 包：
- --- ------- ---------------------
配置
在使用 @etidbury/with-apollo 包前，您需要先在项目中安装一些必要的依赖项：
react组件库react-apolloApollo 客户端graphqlGraphQL API 查询语言
- --- ------- ----- ------------ -------
接下来在您的工程中创建一个新的文件 with-apollo.js。在这个文件中，您需要导入 Apollo 客户端、React 和 @etidbury/with-apollo：
------ - ------------ - ---- --------------- ------ - ------------- - ---- ----------------------- ------ - -------------- - ---- ------------------ ------ - ---------- - ---- ----------------------- ------ ----- ---- -------
现在，我们需要创建一个配置 Apollo 客户端的函数。您可以在这个函数中创建一个新的 ApolloClient 对象，配置 cache、link 和其它一些选项。在这个例子中，我们使用了 createHttpLink 函数创建了一个 HTTP 连接，连接到了一个 GraphQL API：
------ ----- ---------------- - ----------- -- -
----- ----- - --- ---------------
----- ------ - --- --------------
------
----- ----------------
---- --------------------------------
---
--
------ ------------------ -
-- ----- ----------- --- ---------------
------------ ------
-------------
-在这个配置函数中，我们调用了 withApollo 方法来创建一个 Apollo 高阶组件。该组件将 Apollo 客户端注入到您的 React 组件中。
使用
在完成配置后，现在我们可以在 React 组件中使用新的 withApolloConfig 函数了。只需将您的组件作为 withApolloConfig 的参数即可：
------ ----- ---- -------
------ - ---------------- - ---- ---------------
----- ----------- - -- ---- -- -- -
-- -------------- -
------ ---------------------
-
------ ------- ----- -------------------
-
------ ------- -----------------------------现在您的组件已经与 Apollo 客户端连接了！您可以在组件中使用 props.data 属性来读取来自 GraphQL API 的数据了。
示例代码
完整的示例代码如下：
------ - ------------ - ---- ---------------
------ - ------------- - ---- -----------------------
------ - -------------- - ---- ------------------
------ - ---------- - ---- -----------------------
------ ----- ---- -------
------ ----- ---------------- - ----------- -- -
----- ----- - --- ---------------
----- ------ - --- --------------
------
----- ----------------
---- --------------------------------
---
--
------ ------------------ -
-- ----- ----------- --- ---------------
------------ ------
-------------
-
----- ----------- - -- ---- -- -- -
-- -------------- -
------ ---------------------
-
------ ------- ----- -------------------
-
------ ------- -----------------------------总结
@etidbury/with-apollo npm 包提供了一种简单的方式来将 Apollo 客户端注入到您的 React 组件中。在本篇文章中，我们介绍了这个包的安装、配置和使用，并提供了示例代码来让您更好地理解它的使用方式。现在，您已经可以开始使用该 npm 包来编写更加高效的 React 应用了！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/130269