Refresh GraphQL Query Results in Lightning Web Components

The GraphQL wire adapter in LWC caches what it fetches, so a record you just changed can keep rendering its old values. The refreshGraphQL helper from lightning/uiGraphQLApi clears that up without a page reload.

Overview

Salesforce's GraphQL wire adapter caches query results so later loads are faster. After an update, call refreshGraphQL(result) and hand it the original wire result object to pull fresh data. That word original is doing real work: destructuring the wire parameter is what breaks the pattern.

Why refreshGraphQL matters

When your component changes data a GraphQL query depends on, the cached result goes stale. Triggering the refetch yourself updates the cache, so users see current records without a full page refresh.

Key points

refreshGraphQL takes the exact wire result object, so keep the parameter your wire function receives and leave it undestructured in the handler. Passing that object back is what updates the cached query results and re-renders the UI.

Example: Retrieve Accounts and refresh

The sample below retrieves the first five Account records (Name and Id) through the graphql wire adapter. Once records change, call refreshGraphQL with the stored wire result to refresh the cache and the UI.

refreshGraphQL.html

refreshGraphQL.js

import { LightningElement,wire } from 'lwc'; import { gql, graphql, refreshGraphQL } from 'lightning/uiGraphQLApi';

export default class RefreshGraphQL extends LightningElement { results; errors; graphqlData;

@wire(graphql, { query: gql` query AccountWithName { uiapi { query { Account(first: 5) { edges { node { Id Name { value } } } } } } }`, }) graphqlQueryResult(result) { const { data, errors } = result;

if (data) {
  this.results = data.uiapi.query.Account.edges.map((edge) => edge.node);
}
  this.errors = errors;
  this.graphqlData = result;

}

async handleRefresh() { 
    return refreshGraphQL(this.graphqlData);
}

}

Best practices

• Do not destructure the wire parameter in the function signature. You need the original object to pass to refreshGraphQL.
• Store the wire result in a component property, not just the data inside it, so you can call refreshGraphQL later.
• refreshGraphQL returns a promise, so await it or attach then/catch and handle the failures.

Use cases

The usual triggers are creating or updating records that feed a GraphQL-backed list, and third party updates arriving through an integration that the UI has to catch up with. Any screen where cached query results have to match the latest state is a candidate.

Conclusion

Store the original wire result, call refreshGraphQL once the data changes, and the component shows current records without forcing a reload. For admins and developers, the payoff is that end users stop working from records that are already out of date.