Redux + Apollo：如何规范化和格式化响应数据？

Posted 2023-03-08

【中文标题】Redux + Apollo：如何规范化和格式化响应数据？

【英文标题】：Redux + Apollo: How to normalize and format response data?

【发布时间】：2017-05-28 05:42:39

【问题描述】：

我在将数据以我想要的格式输入到我的组件中时遇到了困难。

我的数据来自：

这对我的组件来说不是一种非常有用的格式。我希望数据由 id 作为 suc 键入：

assets: 
  "2a4a34sdf3dd": 
    //asset data
  

我的查询是：

const query = gql`
  assets 
    body
    id
  
`

我这样连接我的组件：

export default compose(
  graphql(query),
  connect(mapStateToProps, mapDispatchToProps)
)(AssetList);

对如何格式化我的 graphql 服务器返回的商店数据有任何见解吗？

【问题讨论】：

为什么不制作一个包装 mapStateToProps 的格式化助手？

【参考方案1】：

Apollo 有自己的 Redux 存储格式，您可以使用 graphql HOC 将其映射为组件可消耗的形状。它以与查询相同的形状将 props 传递给子组件，请参见主页上的示例：http://dev.apollodata.com/

但是，您仍然可以通过传递dataIdFromObject 函数来控制存储中数据的键。例如，如果您在所有对象上都有唯一的 id 字段，您可以简单地使用：

new ApolloClient(
  dataIdFromObject: ( id ) => id,
  ... other options
);

在此处查看更多相关文档：http://dev.apollodata.com/react/cache-updates.html#dataIdFromObject

基本上，虽然 Apollo 使用 Redux 作为 GraphQL 数据的存储，但存储格式并不意味着组件可以直接使用。相反，将graphql HOC 视为一个预制的 Redux 选择器，您可以使用它来有效地将这些数据导入您的 UI。

顺便说一句，如果你想以更面向 GraphQL 的方式查看你的商店，你可以使用最近发布的 Apollo 开发工具：https://github.com/apollostack/apollo-client-devtools

【讨论】：

美丽的答案。谢谢你。我错过了文档中非常重要的细节。

Apollo ^2.0 还是这样吗？似乎不再支持 Redux。