Update Cached Query Results

The GraphQL wire adapter automatically caches your query results to improve the loading performance of subsequent queries. You can trigger a refresh of the query results and update the cache by calling the refresh method on the emitted data from the GraphQL wire adapter.

If you use a wire function, you can assign data and errors to a result variable like this.

1@wire(graphql, { query: ... })
2graphqlQueryResults(result) {
3  const { data, errors, refresh } = result;
4}

Implement Cache Refresh in LWC

The graphqlRefresh component in the lwc-recipes repo demonstrates how to refresh a query using the refresh method.

Tip

Here’s an example that adds a refresh button to the example in Make Your Variables Reactive.

1//refreshAccountsGQL.js
2import { LightningElement, wire } from "lwc";
3import { gql, graphql } from "lightning/graphql";
4
5export default class AccountsGQL extends LightningElement {
6  records;
7  errors;
8  graphqlRefresh;
9
10  minAmount = "5000000";
11
12  minAmounts = [
13    { label: "All", value: "0" },
14    { label: "$5,000,000", value: "5000000" },
15    { label: "$50,000,000", value: "50000000" },
16    { label: "$500,000,000", value: "500000000" },
17  ];
18
19  @wire(graphql, {
20    query: gql`
21      query bigAccounts($minAmount: Currency) {
22        uiapi {
23          query {
24            Account(where: { AnnualRevenue: { gte: $minAmount } }) {
25              edges {
26                node {
27                  Id
28                  Name {
29                    value
30                  }
31                  AnnualRevenue {
32                    displayValue
33                  }
34                }
35              }
36            }
37          }
38        }
39      }
40    `,
41    variables: "$variables",
42  })
43  graphqlQueryResult({ data, errors, refresh }) {
44    if (data) {
45      this.records = data.uiapi.query.Account.edges.map((edge) => edge.node);
46    }
47    this.errors = errors;
48    // Store the refresh method to call later
49    this.graphqlRefresh = refresh;
50  }
51
52  async handleRefresh() {
53    return this.graphqlRefresh();
54  }
55
56  get variables() {
57    return {
58      minAmount: this.minAmount,
59    };
60  }
61
62  // Called when the user selects a new minimum amount
63  handleMinAmountChange(event) {
64    this.minAmount = event.detail.value;
65  }
66}

If a record that’s contained in a query result changes, Lightning Data Service emits a new value to the GraphQL wire adapter. However, Lightning Data Service doesn’t reevaluate the query to see if the record still matches the query.

To ensure that Lightning Data Service reevaluates your query, use the refresh method. This example adds a button that enables you to trigger a refresh of the query results.

1<!-- refreshAccountsGQL.html -->
2<template>
3    <lightning-card title="accountsGQL" icon-name="standard:account">
4        <lightning-button slot="actions" label="Refresh" title="Refresh"
5            icon-name="utility:refresh" onclick={handleRefresh}
6            class="slds-m-left_x-small">
7        </lightning-button>
8        <div class="slds-var-m-horizontal_medium">
9            <lightning-combobox
10                name="minAmount"
11                label="Amount"
12                value={minAmount}
13                placeholder="Select a minimum amount"
14                options={minAmounts}
15                onchange={handleMinAmountChange} ></lightning-combobox>
16
17        <template lwc:if={records}>
18            <template for:each={records} for:item="account">
19                    <div class="card-spacer" key={account.Id}>
20                        <h1 slot="title">{account.Name.value}</h1>
21                        {account.AnnualRevenue.displayValue}
22                    </div>
23            </template>
24        </template>
25    </div>
26</template>