如何将 Redux 应用程序转换为 GraphQL/Apollo？

Posted 2023-03-08

【中文标题】如何将 Redux 应用程序转换为 GraphQL/Apollo？

【英文标题】：How to convert Redux app to GraphQL/Apollo?

【发布时间】：2020-10-21 13:00:53

【问题描述】：

我正在重构一个使用 redux 的 express+react 应用程序，我想切换到 graphql (apollo)，但我有一些不太清楚的事情。

因此，一般流程是通过 GET 请求获取数据（对象数组），然后将这些数据存储在 redux 存储中，并使用选择器分页并显示为列表。然后用户可以编辑条目（条目在 redux 存储中修改），然后他可以“发布”从 redux 存储获取数据并调用 POST 端点。

我将如何在 graphql 中建模？我是否使用 graphql 查询进行分页（使用 DB 中的偏移量/限制）？ 完成编辑后，我如何能够修改内存中的条目并立即发布所有条目？

【参考方案1】：

在 Apollo 中这很简单：

获取的数据存储在规范化缓存中（列表和项目分开）； 组件可以使用useQuery钩子来获取数据（使用缓存客户端）； 使用编辑功能渲染项目； 在您的onChange/onSave 事件调用突变函数（从useMutation 钩子返回）将一个或多个记录数据（您要更新）作为变量传递； 发送到 API 的数据导致响应（突变解析器），您可以使用（在 onCompleted 处理程序中）更新本地缓存（writeQuery）或调用重新获取查询（通过从 useQuery 调用 fn/handler），两者将强制使用更新的数据重新渲染组件；

是的，分页可以使用查询变量、获取更多等来完成。