1

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

我的数据来自:

在此处输入图像描述

对于我的组件来说,这不是一种非常有用的格式。我希望数据由 id 键入,如下所示:

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

我的查询是:

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

我这样连接我的组件:

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

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

4

1 回答 1

6

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

于 2017-01-12T23:11:27.440 回答