React Apollo-进行多个查询

小编典典

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

阅读 280

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