Aggregate Your Results

AVAILABLE API VERSION
API v59.0 and later

Analyze your results by using aggregate functions like finding the average, maximum, minimum, and sum.

Send an Aggregate Request from LWC 

To find the average amount and sum of all opportunities, send an aggregate function using the avg and sum functions.

1//simpleAggregate.js
2import { LightningElement, wire } from "lwc";
3import { gql, graphql } from "lightning/graphql";
4export default class SimpleAggregate extends LightningElement {
5  results;
6  errors;
7
8  @wire(graphql, {
9    query: gql`
10      query AvgOpportunityExample {
11        uiapi {
12          aggregate {
13            Opportunity {
14              edges {
15                node {
16                  aggregate {
17                    Amount {
18                      avg {
19                        displayValue
20                      }
21                      sum {
22                        displayValue
23                      }
24                    }
25                  }
26                }
27              }
28              totalCount
29            }
30          }
31        }
32      }
33    `,
34  })
35  graphqlQueryResult({ data, errors }) {
36    if (data) {
37      this.results = data.uiapi.aggregate.Opportunity.edges.map((edge) => edge.node);
38    }
39    this.errors = errors;
40  }
41}

The wire adapter returns a JSON response that looks like this.

1{
2  "data": {
3    "uiapi": {
4      "aggregate": {
5        "Opportunity": {
6          "edges": [
7            {
8              "node": {
9                "aggregate": {
10                  "Amount": {
11                    "avg": {
12                      "displayValue": "$185,967.74"
13                    },
14                    "sum": {
15                      "displayValue": "$5,765,000.00"
16                    }
17                  }
18                }
19              }
20            }
21          ],
22          "totalCount": 31
23        }
24      }
25    }
26  },
27  "errors": []
28}

The data returned from the GraphQL wire adapter has the same structure as the GraphQL query. While this structure works fine for programmatic use, it can be difficult to consume inside your component’s template. This line of code in the example removes extra layers in the response data to make it easier to consume in the template.

1this.results = data.uiapi.aggregate.Opportunity.edges.map((edge) => edge.node);

Your component then renders the results using the for:each directive with aggregate as the key.

Display the Average and Sum Results 

This example uses the lightning-badge base component to display the aggregate values.

1<!-- simpleAggregate.html -->
2<template>
3    <template lwc:if={results}>
4        <template for:each={results} for:item="opp">
5            <div key={opp.aggregate}>
6                <lightning-badge label={opp.aggregate.Amount.avg.displayValue} icon-name="utility:moneybag"></lightning-badge>
7                <lightning-badge label={opp.aggregate.Amount.sum.displayValue} icon-name="utility:money"></lightning-badge>
8            </div>
9        </template>
10    </template>
11</template>

Send an Aggregate Request and Group Results 

Grouping summarizes your data based on a particular field. You can use aggregate functions with a groupBy argument with optional types CUBE or ROLLUP.

Let’s say you want to group account by year and get the count for each.

1//aggregateWithGrouping.js
2import { LightningElement, wire } from "lwc";
3import { gql, graphql } from "lightning/graphql";
4export default class AggregateWithGrouping extends LightningElement {
5  results;
6  errors;
7
8  @wire(graphql, {
9    query: gql`
10      query GroupAccountsByYear {
11        uiapi {
12          aggregate {
13            Account(groupBy: { CreatedDate: { function: CALENDAR_YEAR } }) {
14              edges {
15                node {
16                  aggregate {
17                    Name {
18                      count {
19                        value
20                      }
21                    }
22                    CreatedDate {
23                      calendarYear {
24                        value
25                      }
26                    }
27                  }
28                }
29              }
30            }
31          }
32        }
33      }
34    `,
35  })
36  graphqlQueryResult({ data, errors }) {
37    if (data) {
38      this.results = data.uiapi.aggregate.Account.edges.map((edge) => edge.node);
39    }
40    this.errors = errors;
41  }
42}

The wire adapter returns a JSON response that looks like this.

1{
2  "data": {
3    "uiapi": {
4      "aggregate": {
5        "Account": {
6          "edges": [
7            {
8              "node": {
9                "aggregate": {
10                  "Name": {
11                    "count": {
12                      "value": 24
13                    }
14                  },
15                  "CreatedDate": {
16                    "calendarYear": {
17                      "value": 2022
18                    }
19                  }
20                }
21              }
22            },
23            {
24              "node": {
25                "aggregate": {
26                  "Name": {
27                    "count": {
28                      "value": 18
29                    }
30                  },
31                  "CreatedDate": {
32                    "calendarYear": {
33                      "value": 2023
34                    }
35                  }
36                }
37              }
38            }
39          ]
40        }
41      }
42    }
43  },
44  "errors": []
45}

Display the Created Date Aggregate Value 

This example uses the lightning-badge base component to display the aggregate values.

1<template>
2  <template lwc:if={results}>
3    <template for:each={results} for:item="account">
4      <div key={account.aggregate}>
5        <h2>{account.aggregate.CreatedDate.calendarYear.value}</h2>
6        <lightning-badge
7          label={account.aggregate.Name.count.value}
8          icon-name="utility:company"
9        ></lightning-badge>
10      </div>
11    </template>
12  </template>
13</template>

See Also 

Aggregate Queries

Grouping Examples

Feature Limitations of Offline GraphQL