来自 GraphQL 的响应解析不正确答案

【问题标题】：Incorrect parsing of response from GraphQL来自 GraphQL 的响应解析不正确
【发布时间】：2017-07-13 23:01:05
【问题描述】：

我是GraphQL 的新手，我在一个围绕Next.js 构建的项目中使用它，并使用Redux 进行状态管理。我有一个相当复杂的查询，它在GraphiQL 接口中产生了非常好的结果。 即使在DevTools 的Network 选项卡中，根据查询中询问的结构，/graphql 调用似乎也有完美的响应。 但是，ApolloProvider 提供的数据在state (Redux Store) 被以一种奇怪的方式解析。我看到很多键（所有对象嵌套迷路了）喜欢

$Item:<some_id>.image:Object
$Item:<some_other_id>.artist:Object
$ROOT_QUERY.suggestions:Object

在 GraphiQL 中，我看到了一个非常好的单个 JSON 对象，但 Apollo 似乎解析不正确，并且在 data 中得到了很多键值对。

我在我的React 组件中使用简单的代码来获取：

export default graphql(fetchDataQuery, {
  props: ({ data }) => ({
    data,
  }),
})(ComponentName);

在这里，如果我尝试记录this.props.data，所有数据似乎都很好。我错过了什么？如何将正确的数据放入Redux 存储？

我的ApolloClient创建代码如下：

function create() {
  return new ApolloClient({
    ssrMode: !process.browser,
    networkInterface: createNetworkInterface({
      uri: 'http://localhost:4000/graphql',
      headers: {
          accept: 'application/json',
          'content-type': 'application/json',
          'cache-control': 'no-cache'
      },
      opts: {
        credentials: 'same-origin',
      },
    }),
  });
}

如果需要任何其他信息，请告诉我。谢谢

【问题讨论】：

标签： graphql apollo react-apollo apollo-client

【解决方案1】：

这是预期的行为。 Apollo 自动规范化它通过查询接收到的数据——您可以阅读有关该过程的更多详细信息here。

要访问查询提供的数据，您需要使用 Apollo 提供的 graphql HOC 组件。这很像 Redux 的 connect HOC，允许您将从特定查询接收到的任何数据映射到包装组件中的 props。

如果您需要将两个 HOC 用于一个组件，那么集成它们也相当简单。您可以阅读有关将 Redux 与 Apollo 集成的更多信息here。

【讨论】：