我有一个查询文件,如下所示:
import {gql} from 'react-apollo'; const queries = { getApps: gql` { apps { id name } } `, getSubjects: gql` { subjects { id name } } ` }; export default queries;
然后,我将此文件导入我的React组件:
import React, {Component} from 'react' import queries from './queries' class Test extends Component { ... } export default graphql(queries.getSubjects)(graphql(queries.getApps)(Test));
这只会获取其中一个查询(getApps)的数据,而不会同时获取这两个查询的数据。如果我一次做一次,看起来像这样:
export default graphql(queries.getSubjects)(Test);
然后它可以工作,但是我没有其他查询。是的,我已经分别测试了它们并且可以正常工作。我如何获得它以便两个查询都显示在我的props.data中?
我的首选方式是使用compose阿波罗客户端(docu)的功能。
compose
编辑:如果您有多个查询,您应该命名它们。
因此,在您的情况下,它可能如下所示:
import React, {Component} from 'react' import queries from './queries' import { graphql, compose } from 'react-apollo'; class Test extends Component { ... render() { ... console.log(this.props.subjectsQuery, this.props.appsQuery); // should show both ... } } export default compose( graphql(queries.getSubjects, { name: "subjectsQuery" }), graphql(queries.getApps, { name: "appsQuery" }), )(Test);