来自 GraphQL 的响应解析不正确

Question

我是 GraphQL 的新手，正在围绕 Next.js 构建的项目中使用它，并使用 Redux 进行状态管理。我有一个相当复杂的查询，它在 GraphiQL 界面中产生了完美的结果。 即使在 DevTools 的 Network 选项卡中，/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',
      },
    }),
  });
}

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

Answer 1

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

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

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

来自 GraphQL 的响应解析不正确

Incorrect parsing of response from GraphQL

apollo

graphql

react-apollo

apollo-client