随着前端技术的不断发展，前后端分离的开发模式变得越来越流行。前端需要与后端进行数据通信，而 GraphQL 已经成为越来越受欢迎的 API 查询语言。与此同时，Apollo 集成了 GraphQL 客户端和服务器端，为开发者提供了更为便捷的方案。
在使用 Apollo 客户端时，@etidbury/with-apollo 是一个非常有用的 npm 包。本篇文章将着重介绍该 npm 包的使用教程，包括安装、配置和使用。
安装
使用 npm 包管理器，在终端中执行以下命令即可安装该 npm 包：
$ npm install @etidbury/with-apollo
配置
在使用 @etidbury/with-apollo 包前，您需要先在项目中安装一些必要的依赖项：
react组件库react-apolloApollo 客户端graphqlGraphQL API 查询语言
$ npm install react react-apollo graphql
接下来在您的工程中创建一个新的文件 with-apollo.js。在这个文件中，您需要导入 Apollo 客户端、React 和 @etidbury/with-apollo：
import { ApolloClient } from 'apollo-client' import { InMemoryCache } from 'apollo-cache-inmemory' import { createHttpLink } from 'apollo-link-http' import { withApollo } from '@etidbury/with-apollo' import React from 'react'
现在，我们需要创建一个配置 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
