Skip to main content

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:

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.