无法转换/规范化/修改 GraphQL 查询的响应 - Apollo 客户端答案

【问题标题】：Can't transform/normalize/modify response of GraphQL query - Apollo Client无法转换/规范化/修改 GraphQL 查询的响应 - Apollo 客户端
【发布时间】：2018-12-28 00:23:12
【问题描述】：

有人使用过修改响应数据的后件吗？

  const parseResponse = new ApolloLink((operation, forward) => {
    return forward(operation).map((response) => {
      response.data.parsed = transformData(response.data)
      return response
    })
  })
  const link = parseResponse.concat(networkLink)

这在 websockets 事件上效果很好 - 数据被转换，添加到数据 response.data 中的这个 parsed 字段，但是在常规的 <Query... 请求中，解析的字段被删除，因此组件无法读取它。我已经确认在查询请求中正确调用了此方法，并且还添加了 parsed 字段，但在后件和组件之间的某处，parsed 字段被剥离

【问题讨论】：

查询实际上就像一个 redux-selector 并且只获取他们正在查询的字段。这意味着您的查询实际上在缓存上运行。当查询结果进来时，它会被集成到缓存中，然后从那里进入您的组件。我认为这是该领域迷失的地方。你在这里做的事情看起来会在某个时候给你带来麻烦。考虑以不同的方式解决这个问题，例如在组件中解析。
总是在组件中解析意味着不必要的样板文件。使用 REST API，我只需创建一个标准化消息的中间件。理想情况下，ApolloClient 应该提供一个中间件机制，我可以在其中转换缓存和客户端之间的响应：/

标签： javascript graphql apollo apollo-client

【解决方案1】：

Apollo Client v3 为 customizing the behavior of cached fields 引入了一项功能：

您可以自定义 Apollo 客户端缓存中各个字段的读取和写入方式。为此，您需要为给定字段定义一个FieldPolicy 对象。您可以在与包含该字段的类型对应的任何 TypePolicy object 中嵌套一个 FieldPolicy 对象。

以下是将日期字符串解析为 Date 对象的方法：

export const apolloClient = new ApolloClient({
  link: ...,
  cache: new InMemoryCache({
    typePolicies: {
      Post: {
        fields: {
          updatedAt: {
            read(time: string) {
              return new Date(time);
            },
          },
        },
      },
    },
  }),
});

【讨论】：