React Apollo - Make Multiple Queries
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);
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);
IMHO, one of the most neat solutions is described in the Apollo Client React implementation.
The basic idea is to wrap your queries into nested Query components. Using closure functions as component children makes it handy to delegate the results of one query down into another query and so on.
const QueryOne = gql` query One { one }`;const QueryTwo = gql` query Two { two }`;const NumbersWithData = () => ( <Query query={QueryOne}> {({ loading: loadingOne, data: { one } }) => ( <Query query={QueryTwo}> {({ loading: loadingTwo, data: { two }}) => { if (loadingOne || loadingTwo) return <span>loading...</span> return <h3>{one} is less than {two}</h3> }} </Query> )} </Query>);