GraphQL

时间:2017-07-13 06:37:59

标签: graphql apollo react-apollo apollo-client

我是GraphQL的新手,并且正在围绕Next.js构建的项目中使用它,并使用Redux进行状态管理。我有一个相当复杂的查询,它在GraphiQL接口中产生了非常好的结果。 即使在Network的{​​{1}}标签中,DevTools调用似乎也可以根据查询中询问的结构进行完美回复。但是,数据{{正在以一种奇怪的方式解析状态(/graphql)中的可用状态。我看到很多键(所有对象都嵌套了  像迷路一样

ApolloProvider

在GraphiQL中,我看到一个非常精细的单个Redux Store对象,但$Item:<some_id>.image:Object $Item:<some_other_id>.artist:Object $ROOT_QUERY.suggestions:Object 似乎正在解析它并且在JSON中获得了大量的键值对。

我在我的Apollo组件中使用简单的代码来获取:

data

在这里,如果我尝试记录React,所有数据似乎都没问题。我错过了什么?如何将正确的数据放入export default graphql(fetchDataQuery, { props: ({ data }) => ({ data, }), })(ComponentName); 商店?

我的ApolloClient创建代码如下:

this.props.data

如果需要任何其他信息,请告知我们。谢谢

1 个答案:

答案 0 :(得分:1)

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

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

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