Make multiple GraphQL queries in a single request

Optimize your dashboard load times.

When building a dashboard, you often need to fetch data from multiple sources. A typical dashboard might require 10-15 different queries. Making each query as a separate request is inefficient because:

1. Each request requires a full network round trip
2. Sequential requests increase the total loading time
3. Multiple requests create unnecessary overhead

GraphQL solves this by allowing you to combine multiple queries into a single request. This approach:

• Reduces network overhead by making one request instead of many
• Improves performance through parallel query execution
• Provides a better user experience with faster load times

When Propel receives a request with multiple queries, it automatically parallelizes them to return the data as quickly as possible.

Example dataset

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 |
|--------------------------|-----------------|--------------|------------------|-----------------|----------|
| 2023-06-23T05:21:07.372Z | Taqueria Cancun | Fish         | 4                | 4               | 1        |
| 2023-06-23T05:21:07.372Z | Taqueria Cancun | Breakfast    | 6                | 3               | 2        |
| 2023-06-23T05:11:07.372Z | Taqueria Cancun | Breakfast    | 12               | 3               | 4        |
| 2023-06-23T05:11:07.372Z | Taqueria Cancun | Al Pastor    | 6.5              | 3.25            | 2        |
| 2023-06-23T05:11:07.372Z | Taqueria Cancun | Al Pastor    | 9.75             | 3.25            | 3        |
| 2023-06-23T05:01:07.372Z | La Taqueria     | Carne Asada  | 14               | 3.5             | 4        |
| 2023-06-23T05:01:07.372Z | La Taqueria     | Breakfast    | 9                | 3               | 3        |
| 2023-06-23T05:01:07.372Z | La Taqueria     | Breakfast    | 12               | 3               | 4        |
| 2023-06-23T04:21:11.101Z | Farolito        | Fish         | 4                | 4               | 1        |
| 2023-06-23T04:21:11.101Z | Farolito        | Chorizo      | 7                | 3.5             | 2        |
| 2023-06-23T04:21:11.101Z | Farolito        | Breakfast    | 3                | 3               | 1        |
| 2023-06-23T04:21:11.101Z | Farolito        | Fish         | 4                | 4               | 1        |
| 2023-06-23T04:21:11.101Z | Farolito        | Chorizo      | 7                | 3.5             | 2        |
| 2023-06-23T04:21:11.101Z | Farolito        | Breakfast    | 3                | 3               | 1        |
| 2023-06-23T04:21:11.101Z | Farolito        | Carne Asada  | 14               | 3.5             | 4        |

Combine multiple queries into one request

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

query {
  revenue: timeSeries(input: {
    metric: {
      name: "Revenue"
    },
    granularity: MONTH,
    timeRange: {
      relative: THIS_YEAR

    },
    filterSql: ""
  }) {
    labels
    values
  }
  orderCount: timeSeries(input: {
    metric: {
      name: "Order Count"
    },
    granularity: MONTH,
    timeRange: {
      relative: THIS_YEAR
    },
    filterSql: ""
  }) {
    labels
    values
  }
  leaderboard(input: {
    metric: {
      name: "Revenue"
    },
    sort: DESC,
    timeRange: {
      relative: THIS_YEAR
    },
    rowLimit: 10,
    dimensions: [
      {
        columnName: "restaurant_name"
      }
    ],
    filterSql: ""
  }) {
    headers
    rows
  }
}

Let’s break down the key aspects of this example:

1. Single request efficiency: Instead of making three separate API calls, we combined all queries into one GraphQL request. This reduces network overhead and improves performance.

2. Query naming: Each time series query has a unique name (revenue and orderCount) to prevent naming conflicts. This makes it easy to identify and access specific data in the response.

3. Response structure: The JSON response organizes results by query name:

   • revenue: Contains revenue data over time
   • orderCount: Contains order count data over time
   • leaderboard: Contains the top restaurants by revenue

Ready to experiment? Try running these queries in the API Playground. You can modify the queries and see the results in real-time.