小编典典

React Apollo-进行多个查询

reactjs

我有一个查询文件,如下所示:

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中?


阅读 275

收藏
2020-07-22

共1个答案

小编典典

我的首选方式是使用compose阿波罗客户端(docu)的功能。

编辑:如果您有多个查询,您应该命名它们。

因此,在您的情况下,它可能如下所示:

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);
2020-07-22