介绍
Apollo 是一个 JavaScript 应用程序的前端解决方案，它允许你轻松地构建 Web 应用程序和组件。通过集成多个工具和框架，Apollo 提供了一个完整的 Web 开发环境，包括路由、状态管理、数据查询和缓存等功能。
安装
你可以使用 npm 或 yarn 安装 Apollo：
npm install apollo-client graphql react-apollo --save # or yarn add apollo-client graphql react-apollo
这里我们安装了 apollo-client、graphql 和 react-apollo 三个 npm 包。
使用
客户端配置
首先，在你的应用程序中，你需要实例化一个 Apollo 客户端：
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ------ - ------------- - ---- ------------------------ ------ - -------- - ---- ------------------- ----- ------ - --- -------------- ------ --- ---------------- ----- --- ---------- ---- ----------- --- ---展开代码
这个客户端用于连接 GraphQL API，并提供所需的请求和响应等服务。
在代码中，我们实例化了一个 ApolloClient 对象，并且传递了一个 InMemoryCache 对象和一个 HttpLink 对象。
在这个例子中，我们使用了 "http://localhost:3000/graphql" 作为我们的 GraphQL API，你可以用你自己的 API 替换这个地址。
组件集成
然后，你需要将 Apollo 客户端与你的 React 应用程序集成。这里我们使用 React Apollo 库接口来实现：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------------- - ---- --------------- ------ --- ---- -------- ------ ------ ---- ----------- ---------------- --------------- ---------------- ---- -- ------------------ ------------------------------- --展开代码
在这个示例代码中，我们通过 ApolloProvider 组件将 Apollo 客户端传递给 React 组件。
数据查询
现在你已经配置好了 Apollo 客户端和组件，下面我们将实现一些数据查询：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --- - ---- --------------- ------ - ----- - ---- --------------- ----- --------- - ---- - ----- - -- ----- ------ - - -- ----- -------- - -- -- - ------ ------------------ --- -------- ------ ---- -- -- - -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ ----------------- --- ------ ------ -- -- - ---- --------- ---------- - ------------ ------ --- -- -------- -- ------ ------- ---------展开代码
在这个例子中，我们定义了一个名为 GET_BOOKS 的 GraphQL 查询。这个查询将从 API 返回一个包含所有书籍的列表。
使用 React Apollo 中的 Query 组件，我们可以将这个查询与我们的组件集成。如果数据正在加载中，我们就显示一个 Loading... 的信息。如果出现错误，我们就显示一个 Error :( 的信息。
如果数据加载成功，我们就将每个书籍的标题和作者输出到页面上。
总结
通过本文，你已经了解了如何安装和配置 Apollo 客户端，并集成到 React 应用程序中。同时，我们还展示了如何使用 React Apollo 查询 GraphQL 数据。如果你还没有尝试过 Apollo，那么现在就可以开始使用了。
完整示例代码请戳这里。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/appolo
