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存儲格式，您可以使用graphql HOC將其graphql為組件可消耗的形狀。 它將道具以與查詢相同的形狀傳遞給子組件，請參閱主頁上的示例： 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