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

Question

我正面临着以我想要的格式将数据导入组件的困难.

我的数据来自:

对于我的组件,它不是一种非常有用的格式.我希望数据被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商店格式,您可以使用graphqlHOC 将其映射到组件可以使用的形状.它将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数据的存储,但存储格式并不意味着直接由组件使用.相反,可以将graphqlHOC视为预先制作的Redux选择器,您可以使用它来有效地将数据导入UI.

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