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:
Promise.all)How to reproduce the issue:
Not applicable.
Version