Aggregate Your Results

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.

//simpleAggregate.js
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/graphql";
export default class SimpleAggregate extends LightningElement {
  results;
  errors;

  @wire(graphql, {
    query: gql`
      query AvgOpportunityExample {
        uiapi {
          aggregate {
            Opportunity {
              edges {
                node {
                  aggregate {
                    Amount {
                      avg {
                        displayValue
                      }
                      sum {
                        displayValue
                      }
                    }
                  }
                }
              }
              totalCount
            }
          }
        }
      }
    `,
  })
  graphqlQueryResult({ data, errors }) {
    if (data) {
      this.results = data.uiapi.aggregate.Opportunity.edges.map((edge) => edge.node);
    }
    this.errors = errors;
  }
}

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

{
  "data": {
    "uiapi": {
      "aggregate": {
        "Opportunity": {
          "edges": [
            {
              "node": {
                "aggregate": {
                  "Amount": {
                    "avg": {
                      "displayValue": "$185,967.74"
                    },
                    "sum": {
                      "displayValue": "$5,765,000.00"
                    }
                  }
                }
              }
            }
          ],
          "totalCount": 31
        }
      }
    }
  },
  "errors": []
}

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.

this.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.

<!-- simpleAggregate.html -->
<template>
    <template lwc:if={results}>
        <template for:each={results} for:item="opp">
            <div key={opp.aggregate}>
                <lightning-badge label={opp.aggregate.Amount.avg.displayValue} icon-name="utility:moneybag"></lightning-badge>
                <lightning-badge label={opp.aggregate.Amount.sum.displayValue} icon-name="utility:money"></lightning-badge>
            </div>
        </template>
    </template>
</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.

//aggregateWithGrouping.js
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/graphql";
export default class AggregateWithGrouping extends LightningElement {
  results;
  errors;

  @wire(graphql, {
    query: gql`
      query GroupAccountsByYear {
        uiapi {
          aggregate {
            Account(groupBy: { CreatedDate: { function: CALENDAR_YEAR } }) {
              edges {
                node {
                  aggregate {
                    Name {
                      count {
                        value
                      }
                    }
                    CreatedDate {
                      calendarYear {
                        value
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    `,
  })
  graphqlQueryResult({ data, errors }) {
    if (data) {
      this.results = data.uiapi.aggregate.Account.edges.map((edge) => edge.node);
    }
    this.errors = errors;
  }
}

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

{
  "data": {
    "uiapi": {
      "aggregate": {
        "Account": {
          "edges": [
            {
              "node": {
                "aggregate": {
                  "Name": {
                    "count": {
                      "value": 24
                    }
                  },
                  "CreatedDate": {
                    "calendarYear": {
                      "value": 2022
                    }
                  }
                }
              }
            },
            {
              "node": {
                "aggregate": {
                  "Name": {
                    "count": {
                      "value": 18
                    }
                  },
                  "CreatedDate": {
                    "calendarYear": {
                      "value": 2023
                    }
                  }
                }
              }
            }
          ]
        }
      }
    }
  },
  "errors": []
}

Display the Created Date Aggregate Value

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

<template>
  <template lwc:if={results}>
    <template for:each={results} for:item="account">
      <div key={account.aggregate}>
        <h2>{account.aggregate.CreatedDate.calendarYear.value}</h2>
        <lightning-badge
          label={account.aggregate.Name.count.value}
          icon-name="utility:company"
        ></lightning-badge>
      </div>
    </template>
  </template>
</template>

See Also

Aggregate Queries

Grouping Examples

Feature Limitations of Offline GraphQL