React Apollo - 进行多个查询 [英] 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 客户端的 compose 功能(docu).

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

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