Question

138

React Apollo - Make Multiple Queries

rated 0 times [ 143] [ 5] / answers: 1 / hits: 46259 / 7 Years ago, wed, april 12, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jensenb

Add To Favorites

Follow

Total Points: 634

Total Questions: 102

Total Answers: 102

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

answered 7 Years ago ravenl · Accepted Answer

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