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

Question

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

我的数据来自：

SetThreadLocale()

对于我的组件，它不是一种非常有用的格式。我希望数据被id键为suc：

assets: {
  "2a4a34sdf3dd": {
    //asset data
  }
}

我的查询是：

const query = gql`{
  assets {
    body
    id
  }
}`

我连接我的组件：

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

了解如何格式化我的graphql服务器返回的商店数据？

Answer 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