对来自GraphQL的响应的分析不正确

我不熟悉

GraphQL

，并且在围绕

Next.js

构建的项目中使用它，并使用

Redux

进行状态管理。我有一个相当复杂的查询，它在

GraphiQL

界面中产生了非常好的结果。 即使在

DevTools

的

Network

选项卡中，

/graphql

调用似乎根据查询中要求的结构有一个完美的响应。但是，

ApolloProvider

在状态（

Redux Store

）中提供的数据正在以一种奇怪的方式被解析。我看到很多关键点（所有对象嵌套） 迷路了）就像

在这里，如果我尝试记录

this.props.data

，所有数据似乎都正常。我错过了什么？如何将正确的数据放入

Redux

存储

我的客户端创建代码如下所示：

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',
      },
    }),
  });
}

---

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

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

要访问查询提供的数据，您需要使用Apollo提供的

graphql

HOC组件。这与Redux的

connect

HOC非常相似，允许您将从特定查询接收的任何数据映射到包装组件中的道具

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

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

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',
      },
    }),
  });
}