React Apollo - Make Multiple Queries

Question

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; 

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

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

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?

Answer 1

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

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

Answer 2

If you don't want to reuse any of those queries independently, why not make a single request by combining both queries in one i.e:

const combinedQueries = gql` {   apps {     id     name   }   subjects {     id     name   } } ` 

and then you can use it in your component

import React, {Component} from 'react' import combinedQueries from './combinedQueries'  class Test extends Component {    ...    render() {      ...      if(!this.props.combinedQueries.loading) {        console.log(this.props.combinedQueries.apps);        console.log(this.props.combinedQueries.subjects);      }      ...    } }  export default graphql(combinedQueries, {name: 'combinedQueries'})(Test);