在前端技术中，Webpack 已经成为了一个必不可少的构建工具，但是它还需要一些其他的技术和工具来协同工作。bs-reason-apollo 是一个针对 ReasonML 和 GraphQL 特别优化的 npm 包，能够为开发者提供一种简洁高效的解决方案。
什么是 bs-reason-apollo?
bs-reason-apollo 是一个结合了 ReasonML 和 Apollo Client 技术的 npm 包，它使得开发者能够更加容易地使用 Apollo Client，并且利用了 ReasonML 的类型系统和构建方式。这个包自带的是胶合代码，可以把 ReasonML 和 Apollo Client 连接起来运行，也就是将查询字符串转化为 ReasonML 类型，生成类型安全的代码，以及编写与类型安全的 Apollo Client 相关代码。
安装 bs-reason-apollo
要使用 bs-reason-apollo，请先确保你已经安装了 ReasonML 和 GraphQL。然后，可以通过 npm 安装 bs-reason-apollo，如下所示：
npm install bs-reason-apollo
bs-reason-apollo 的使用和工作原理
bs-reason-apollo 的基础使用方式是将 GraphQL 的查询语言转换为类型安全的 ReasonML 代码，并与 Apollo Client 集成。下面我们来介绍一下如何使用 bs-reason-apollo：
1. 引入 bs-apollo 依赖
代码示例：
-- -------------------- ---- -------
---- ----------------------
---- ---------------
-- ------- --
--- ---------- - --
----- ------------------ ----- -
-------- -------- -
----
------
----
-
-
---
-- --------- -------- -- --
--- --------- - --------- --
----- ------------------ ----- -
-------- -------- -
----
------
----
-
-
----
-- -- ------ ------ --
--- ------ - --- ------------------
--- ------ - --------------------------------------------------- ----
--- ------ - --------------------------------- --------------首先，我们要引入 bs-apollo 的依赖。然后，我们定义了一个查询字符串，其中涉及到一个参数 $songId。接着，我们将这个查询字符串转化为 ReasonML 类型变量 songQuery。最后，我们将创建一个新的 InMemoryCache，以及一个 HttpLink，连接到我们的 GraphQL 服务器。最后，我们调用 createApolloClient 方法，将 cache 和 link 作为参数传入，来创建 Apollo 客户端。
2. 声明接收 GraphQL 数据的组件
代码示例：
-- -------------------- ---- -------
-- ---------- --
---- ------ - -
------- -
------- -
------- -------
--------- -------
------- ----
--
--
---------- -----
-------- ---------------
--
-- -- ----------- -- --
--- --------- - ------------------------------------------------
-- -------- ------- -- --
--- --------- - -------- --
------
-- ------------------------------------ ---------------------- ---------
-- ------------------------- -- ---------------------
-- -------------------- -- -
--------------------
------ ----
---
-- ---- --
--- ---- - ----------- -- -
-------------
------- ---- -- -
------ ----------------- -
- ---------- --
-----
--------------------------------
----------------------------------
-----------------------------------------------
------
- ---- --
------------------
-
--
--------- ---- -- -
-----------------
-- --------------------- -- --------------- -- ------ ----------- -------- --------
-- -------------------- -- --------------- -- --------- ------ ------ -----------------------------
-- -------
--
--在 rprops 中，“data”对象中的 “song”对象定义了要接收的数据类型，这是因为，在 GraphQL 中，数据和类型是分开定义的。在 ReasonReact 中，我们定义了一个无状态组件，最后我们将数据向组件传递。在 querySong 函数中，我们使用 apollo 对象从服务器获取数据，然后设定组件的初始状态为 “loading”。当数据返回时，我们将其作为组件状态保存（使用 setState 方法），然后渲染组件。在 didMount 钩子函数中，我们调用了 querySong 函数。
这就是 bs-reason-apollo 的基本使用方式。这种方式可以让我们在代码中适用 ReasonML 的类型系统，从而避免在编译器中出现许多运行时错误。
总结
bs-reason-apollo 的主要思想是通过使用 ReasonML 类型系统和构建方式，与 Apollo Client 相结合，实现完整的 GraphQL 解决方案。你可以从该 npm 包中学到适用 ReasonML 的最佳实践，包括将查询语言转换为类型安全的 ReasonML 代码，生成类型安全的 Apollo Client 相关代码，以及编写原生的 ReasonML 组件。 除此之外，bs-reason-apollo 还可以进一步探索如何在前端工具链中使用 ReasonML，这是非常有价值的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005758481e8991b448ea611