javascript - React Apollo - 进行多个查询

Question

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

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

Answer 1

我的首选方法是使用 apollo 客户端 ( 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);