Apollo 客户端（React）：可以从 Query 对象获取规范化数据吗？答案

【问题标题】：Apollo Client (React): Possible to get normalized data from Query object?Apollo 客户端（React）：可以从 Query 对象获取规范化数据吗？
【发布时间】：2019-01-05 15:16:05
【问题描述】：

react-apollo 的 Query.data 对象以嵌套形式提供数据，如下所示：

{
    "findUser": [
      {
        "__typename": "User",
        "id": "5a6efb94b0e8c36f99fba013",
        "email": "Lloyd.Nikolaus@yahoo.com",
        "posts": [
          {
            "__typename": "BlogPost",
            "id": "5a6efb94b0e8c36f99fba016",
            "title": "Dolorem voluptatem molestiae",
            "comments": [
              {
                "__typename": "Comment",
                "id": "5a6efb94b0e8c36f99fba019",
                "message":
                  "Alias quod est voluptatibus aut quis sunt aut numquam."
              },
              {
                "__typename": "Comment",
                "id": "5a6efb94b0e8c36f99fba01b",
                "message": "Harum quia asperiores nemo."
              },
              {
                "__typename": "Comment",
                "id": "5a6efb94b0e8c36f99fba01c",
                "message": "Vel veniam consectetur laborum."
              },
              {
                "__typename": "Comment",
                "id": "5a6efb94b0e8c36f99fba01e",
                "message":
                  "Possimus beatae vero recusandae beatae quas ut commodi laboriosam."
              }
            ]
          }
        ]
      }
    ]
}

我有一个用例需要标准化形式的数据，如下所示：

{
  "comments": {
    "5a6efb94b0e8c36f99fba019": {
      "id": "5a6efb94b0e8c36f99fba019",
      "message": "Alias quod est voluptatibus aut quis sunt aut numquam."
    },
    "5a6efb94b0e8c36f99fba01b": {
      "id": "5a6efb94b0e8c36f99fba01b",
      "message": "Harum quia asperiores nemo."
    },
    "5a6efb94b0e8c36f99fba01c": {
      "id": "5a6efb94b0e8c36f99fba01c",
      "message": "Vel veniam consectetur laborum."
    },
    "5a6efb94b0e8c36f99fba01e": {
      "id": "5a6efb94b0e8c36f99fba01e",
      "message":
        "Possimus beatae vero recusandae beatae quas ut commodi laboriosam."
    }
  },
  "blogPosts": {
    "5a6efb94b0e8c36f99fba016": {
      "id": "5a6efb94b0e8c36f99fba016",
      "title": "Dolorem voluptatem molestiae",
      "comments": [
        "5a6efb94b0e8c36f99fba019",
        "5a6efb94b0e8c36f99fba01b",
        "5a6efb94b0e8c36f99fba01c",
        "5a6efb94b0e8c36f99fba01e"
      ]
    }
  },
  "users": {
    "5a6efb94b0e8c36f99fba013": {
      "id": "5a6efb94b0e8c36f99fba013",
      "email": "Lloyd.Nikolaus@yahoo.com",
      "posts": ["5a6efb94b0e8c36f99fba016"]
    }
  }
}

鉴于 Apollo 已经以规范化形式缓存数据的持久性，有没有办法以规范化形式访问相关响应数据，而不使用像 graphql-normalizr 库那样的单独规范化过程？

如果可能的话，我想避免双重标准化的开销。

【问题讨论】：

标签： graphql react-apollo apollo-client

【解决方案1】：

您应该可以使用client.readFragment() 读取缓存中的展平数据

在此处查看文档： https://www.apollographql.com/docs/react/advanced/caching.html#readfragment

【讨论】：