Redux 中间件和 GraphQL

Posted 2023-03-08

【中文标题】Redux 中间件和 GraphQL

【英文标题】：Redux Middleware And GraphQL

【发布时间】：2020-02-02 06:11:23

【问题描述】：

好的，根据我的理解，我们在 redux 中为所有 async calls 使用中间件，现在从 Apollo documentation 我们可以直接在我们的组件中使用查询和突变。 我个人认为使用中间件将所有业务逻辑写在一个单独的地方更直观，因为它有助于使业务逻辑远离 UI（可以使用 redux 进行数据交换） 有没有办法使用带有 GraphQL 的 redux 中间件来保持我的业务逻辑分离，而不是将其混合在我的 UI 中？ 就像redux-logic'screate-logger 中的 fetch 或 axios 一样。

【问题讨论】：

您是否考虑过使用 Apollo 的内置状态管理（以前称为 apollo-link-state）？这使您能够以与 GraphQL 相同的方式改变和查询您的状态。您还可以在同一查询中查询您的缓存和后端。 apollographql.com/docs/angular/guides/state-management

感谢您的信息，我没有机会看到 apollo-link-state。因此，如果我使用 apollo-link-state，我将不需要 redux 来管理我的状态。对

没错，但由于 apollo-link-state 现在已融入 Apollo 客户端，因此您已经可以使用它了

【参考方案1】：

有什么方法可以将我的业务逻辑与 GraphQL 结合使用 redux 中间件，而不是将其混合在我的 UI 中？

您可以通过使用 apollo-fetch 和 redux-saga 来实现它，这是一个 Redux 中间件。

当需要获取数据时，调度一个简单的同步 Redux 操作。它被 redux-saga 拦截，它可以使用 Apollo 异步获取数据，如果需要，可以执行其他异步操作作为响应，然后将一个或多个同步操作分派到 Redux 存储。

然后可以在称为“sagas”的异步 redux-saga 函数之间拆分业务逻辑，这可能会触发其他 sagas 以适应更复杂的逻辑，并最终将操作分派给 Redux，这仍然是您的主要“事实来源”申请。

【参考方案2】：

鉴于我的团队已经在使用 graph/Apollo Client，我们最近已经不再使用 Redux，而是选择了 Apollo Client 的内置解决方案来管理本地状态。如其文档中所述：

Apollo Client (>= 2.5) 具有内置的本地状态处理功能 允许您将本地数据存储在 Apollo 缓存中 与您的远程数据一起。要访问您的本地数据，只需查询它 使用 GraphQL。您甚至可以在 相同的查询！

更具体地说，使用@client 指令，您可以标记您希望使用客户端解析器在本地获取字段数据以执行本地查询或突变，或来自缓存。您可以查看文档here。使用这个单一工具的能力简化了我们的本地状态管理。更重要的是，这个解决方案可以满足您在 UI 和业务逻辑之间进行更多分离的要求，因为该逻辑应该在很大程度上封装在您的客户端解析器中，它可以处理异步请求，包括网络上的请求。