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

Question

我很难以我想要的格式将数据导入我的组件。

我的数据是：

这不是我的组件非常有用的格式。我希望数据按 id 键控，如下所示：

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
});

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

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

Redux + Apollo: How to normalize and format response data?