There are scenarios where you want to run multiple queries at once. For example, you have a page consisting of two components, and each component’s data is derived from a separate query, but you want both of them to be executed and resolved before proceeding with the rendering. There are many ways to achieve this.

Here are the two queries we will start with. We will look at multiple solutions to execute and resolve them simultaneously.

Solution 1: Define a combined query for both of them

Define a combined query that will execute both of them with the shared variables set. This is a simple but unscalable solution.

And then you can use it with the <Query> component from react-apollo like this:

Note: this will be done in one network call.

While this works great with this example, it has two drawbacks: