0

我是新手，GraphQL并且正在一个围绕Next.js并Redux用于状态管理的项目中使用它。GraphiQL我有一个相当复杂的查询，它在界面 中产生了非常好的结果。根据查询中询问的结构，即使在呼叫的选项Network卡中似乎也有完美的响应。DevTools/graphql但是，ApolloProvider在状态 ( 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',
      },
    }),
  });
}

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

4

1 回答 1

1

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

要访问查询提供的数据，您需要使用graphqlApollo 提供的 HOC 组件。这与 Redux 的 HOC 非常相似connect，它允许您将从特定查询接收到的任何数据映射到包装组件中的 props。

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

于 2017-07-13T15:01:05.723 回答