How to make multiple GraphQL queries in one request

In this guide, you'll learn how to make multiple GraphQL queries in a single request.

Loading a dashboard typically takes 10 to 15 different queries. Making these as independent requests that require a server round trip is inefficient and hurts the user experience. GraphQL allows you to make multiple queries in a single request, which is the optimal way to fetch all the data you need for your dashboard. Once Propel receives the queries, it will parallelize them to serve the data as fast as possible.

Example

In the following example, we'll use the same data that we used in our Quickstart.

It contains sales data from taco restaurants, and it has the following structure, shown in the table below:

timestamp

restaurant_name

taco_name

taco_total_price

taco_unit_price

quantity

Suppose you want to show three charts on your dashboard:

• Total taco sales in dollars plotted over time
• The number of taco sales plotted over time
• Top-performing restaurants with the most revenue

Instead of sending three separate requests for these charts, you can combine them into one:

• GraphQL Query
• GraphQL Variables
• JSON Response

query CombinedExample(
  $revenueOverTimeInput: TimeSeriesInput!
  $orderCountOverTimeInput: TimeSeriesInput!
  $leaderboardInput: LeaderboardInput!
) {
  revenueOverTime: timeSeries(input: $revenueOverTimeInput) {
    labels
    values
  }
  orderCountOverTime: timeSeries(input: $orderCountOverTimeInput) {
    labels
    values
  }
  leaderboard(input: $leaderboardInput) {
    headers
    rows
  }
}

A few things to note here:

1. The three queries have been combined into one, and the input for each is given a meaningful name: $revenueOverTimeInput, $orderCountOverTimeInput, and $leaderboardInput.
2. To avoid naming conflicts, each timeSeries query is given a distinct name: revenueOverTime and orderCountOverTime.
3. The JSON response contains output from all of the queries. You can parse the JSON response and visualize each query result using any data visualization library, including our own UI Kit React component.

If you want to give this a try yourself in an interactive environment, you can use our GraphQL Explorer.