Apollo-client: Is there a way to use the Query component like Promise.all?

Created on 10 May 2018  路  6Comments  路  Source: apollographql/apollo-client

Intended outcome:

I have a React component that needs 7 GraphQL queries to finish firing before I can render the page. I need an error state, a loading state, and of course a final state generated by combining responses from all of the queries.

I want to do this concisely and cleanly.

I would like to do something similar to the behavior in Promise.all():

const queryOne = this._apolloClient.query(optionsOne);
const queryTwo = this._apolloClient.query(optionsTwo);
const queryThree = this._apolloClient.query(optionsThree);
const queryFour = this._apolloClient.query(optionsFour);

// Like Promise.all([queryOne, queryTwo, queryThree, queryFour]);

<Query queryArray=[queryOne, queryTwo, queryThree, queryFour]>
    {({ loading, error, data }) => {
        // data --> [dataOne, dataTwo, dataThree, dataFour]
        // loading --> true if any of these are still loading
        // error --> [error1, errorTwo, errorThree, errorFour]
    }}
</Query>

How can I achieve this? I could definitely roll my own fairly easily but if there is a built-in way to achieve this I would love to use it.

Actual outcome:

The best solution I can come up with is something like:

<Query>
  <Query>
    <Query>
      <Query>
        { // etc. }
      </Query>
    </Query>
  </Query>
</Query>

But that is:

  • Executed in order (not parallel like Promise.all)
  • Very ugly syntax after you add in all the details

How to reproduce the issue:

Not applicable.

Version

  • apollo-client@<2.1.4>