反应阿波罗 - 进行多次查询 [英] React Apollo - Make Multiple Queries

问题描述

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

I have a queries file that looks like this:

import {gql} from 'react-apollo';

const queries = {
  getApps: gql`
    {
      apps {
        id
        name
      }
    }
  `,
  getSubjects: gql`
    {
      subjects {
        id
        name
      }
    }
  `
};

export default queries;

然后我将此文件导入我的React组件：

I then import this file to my React component:

import React, {Component} from 'react'
import queries from './queries'

class Test extends Component {
...
}

export default graphql(queries.getSubjects)(graphql(queries.getApps)(Test));

这只会获取其中一个查询（getApps）的数据，而不是两者。如果我一次做一个，看起来像这样：

This will only get data for one of the queries (getApps) and not both. If I do one at a time so that it looks like this:

export default graphql(queries.getSubjects)(Test);

然后它有效，但我没有其他查询。是的，我已经单独测试了它们并且它们有效。我如何得到它以便两个查询出现在我的props.data中？

then it works but I don't have my other query. Yes, I have tested both separately and they work. How do I get it so that both queries show up in my props.data?

推荐答案

我首选的方法是使用撰写 apollo客户端的功能（纪录片）。

My preferred way is to use the compose functionality of the apollo client (docu).

编辑：
如果您有多个查询，则应为其命名。

If you have more than one query you should name them.

所以在你的情况下，它看起来像这样：

So in your case, it could look like this:

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);

这篇关于反应阿波罗 - 进行多次查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！