随着前端越来越重要，开发者们也越来越需要一套流畅的工具来使其应用更高效、可靠、可维护。inferno-apollo 就是其中的一员，它结合了 Inferno 和 Apollo，可以帮助我们更轻松地构建响应式的 Web 应用。
Inferno 是什么？
Inferno 是一个轻量、可扩展和高性能的 JavaScript 库，它的特点是：轻量级，速度快、高度模块化、易于阅读和维护。如果你喜欢 React，那么 Inferno 更快更节省资源，Inferno 支持所有 React 接口和大部分React 样式 API 的部分实现，并且可以运行在旧版本的 Internet Explorer 上。
Apollo 是什么？
Apollo 是一个有用而强大的 GraphQL 客户端。它极大地简化了从服务器提取数据的任务，而不需要手动管理 RESTful 请求。使用 Apollo，您可以声明数据需求并自动检索和缓存服务器响应，无需处理过多的请求和响应语句。这使得我们得以获得更好的跨平台和离线支持。
如何使用 Inferno-apollo
Inferno-apollo 是 Inferno 组件和 Apollo 功能的合并。它允许我们使用 GraphQL 来减少客户端代码的时间和复杂性，代码更简洁，且响应速度更快。
步骤 1：安装
在使用 Inferno-apollo 之前，请确保您已经安装了以下内容：
- Inferno
- Apollo
- Inferno-apollo
使用 npm 安装：
npm install --save inferno-apollo
步骤 2：初始化
使用 Inferno-apollo 创建一个与服务器通信的示例：
-- -------------------- ---- -------
------ ------- ---- ----------
------ ------------ ---- ---------------
------ - --------------- ----- - ---- -----------------
------ --- ---- --------------
------ ---------- ---- --------------
----- ------ - --- --------------
---- -----------------------------------------
---
----- ----- - ----
-
------------ ---------- -
-----------
------ -
----
-
-
-
--
----- --- - -- -- -
--------------- ----------------
-----
------ ----- ------- ------ --- -------
------ --------------
--- -------- ------ ---- -- -- -
-- --------- ------ -------------
-- ------- ------ ------- ------------------
------ -
--
-------------------------------
----
---------------------------- -- -
--- ----------------------------------
---
-----
---
--
--
--------
------
-----------------
--
---------------------- --- ---------------------------------这个示例使用了 ApolloProvider、Query 等 Inferno-apollo 组件，并使用 GraphQL 查询来获取来自服务器的电影：Inferno 的数据，然后呈现数据到页面中。
在 App 组件的渲染代码中，我们首先创建 ApolloClient 的实例，并将其传递给 ApolloProvider 组件作为 client prop。接下来，我们查询电影，然后在 Query 组件中使用数据。
当我们渲染 Query 组件时，我们使用请求返回的 loading、error、data 状态值，以便在数据准备好之前保留用户体验。
结论
Inferno-apollo 是一个出色的库，它允许前端开发人员在构建 Web 应用程序时使用优秀的 GraphQL 和 Inferno 框架，因此它可以帮助我们轻松地构建响应式的 Web 应用程序，以及越来越重要的单页应用程序。它的使用非常简单，如果从未尝试过，请一定要亲手试一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ead81e8991b448dc27f