如何将 redux 与 graphql 一起使用

Posted 2023-03-08

【中文标题】如何将 redux 与 graphql 一起使用

【英文标题】：How to use redux with graphql

【发布时间】：2021-08-14 20:14:52

【问题描述】：

我喜欢graphql。因为它只有一个端点，我只能提取我需要的数据。

所以我使用 apollo-server 作为服务器，apollo-client 作为客户端。

从 apollo-client 3.0 开始，支持状态管理。

apollo-client的reactive变量功能很方便，不过我更喜欢redux。

Redux 工具包还缩短了需要编写的代码长度。

问题是这样的。

不能同时使用 apollo-client 3.0 和 redux 吗？

我不能在 redux 上只使用没有 apollo-client 的 graphql 吗？那怎么办？

请检查！

【问题讨论】：

对所有获取的数据使用 Apollo 客户端 [with normalizing cache]（复制/复制数据到 redux 没有意义，管理获取/等待/错误处理也是如此） ... redux 用于其他全局应用程序状态（抽屉打开、活动过滤器、[默认] 排序顺序等）在许多地方/组件中常见/使用

【参考方案1】：

了解GraphQL is just a protocol for describing requests and responses 很重要。但是，是的，“我正在使用 GraphQL”通常也意味着使用 Apollo 或 Urql 等智能客户端库。

当然可以在同一个应用程序中使用 Apollo 和 Redux，但问题在于您分别使用它们的目的是什么。我已经在我的帖子When (and when not) to Reach for Redux 和Redux - Not Dead Yet! 中介绍了这一点。总结：

您可以将 Redux 用于任何事情，包括服务器状态缓存和客户端状态 Apollo 专为使用 GraphQL 请求缓存服务器状态而构建 如果您使用 Redux 的唯一是缓存服务器状态，并且您选择使用 Apollo 来完成该任务，那么您真的不再需要 Redux 但是，如果您真的需要，您可以使用 GraphQL 来处理请求并将该数据放入 Redux 中

值得注意的是，我们有an upcoming "RTK Query" API for Redux Toolkit that provides a complete data fetching abstraction 和we even have a demo of using RTK Query to request and cache data with GraphQL。您可能想尝试一下。