Refresh GraphQL Query Results in Lightning Web Components

Posted by Vinay Vernekar 16th September 2025

Learn how to refresh cached GraphQL query results in Lightning Web Components (LWC) using the refreshGraphQL helper from lightning/uiGraphQLApi. Keep UI data in sync after updates without reloading the page.

Overview

Salesforce’s GraphQL wire adapter caches query results for faster subsequent loads. To get fresh data after you perform an update, use the refreshGraphQL(result) function and pass it the original wire result object. This article explains why that matters, shows a working example (HTML + JavaScript), and provides best practices for preserving the original wire object.

Why refreshGraphQL matters

When your component modifies data that a GraphQL query depends on, the UI should reflect those changes quickly. Manually triggering a refetch ensures the cache is updated and users see current records without a full page refresh.

Key points

  • refreshGraphQL takes the exact wire result object (do not destructure it in the wire handler).
  • Preserve the original parameter passed to your wire function or variable.
  • Use refreshGraphQL to update the cached query results and re-render the UI.

Example: Retrieve Accounts and refresh

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

refreshGraphQL.html

<template>
    <lightning-card title="Refresh GraphQL Result" icon-name="utility:user">
        <div class="slds-var-m-horizontal_medium">
        <template lwc:if={results}>
            <template for:each={results} for:item="account">
            <div key={account.Id}>
                {account.Name.value}
            </div>
            </template>
        </template>
        <br/>
        <lightning-button variant="success" label="Refresh" title="Refresh Result" onclick={handleRefresh} class="slds-m-left_x-small"></lightning-button>

        </div>
    </lightning-card>
</template>

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 must retain the original object to pass to refreshGraphQL.
  • Store the wire result (not just the data) in a component property so you can call refreshGraphQL later.
  • Handle errors gracefully — refreshGraphQL returns a promise, so await or then/catch as needed.

Use cases

  • After updating or creating records that affect a GraphQL-backed list.
  • When integrating third-party updates and you need to sync the UI.
  • Any real-time or near-real-time UI where cached query results must reflect the latest state.

Conclusion

refreshGraphQL is a lightweight and effective way to update cached GraphQL query results in LWCs. By storing the original wire result and calling refreshGraphQL, you ensure a consistent, up-to-date UI without forcing a full reload. This pattern improves UX and keeps your components responsive.

Why this matters for Salesforce admins, developers, and business users: admins and developers can deliver faster, more reliable UI updates after data changes, which reduces confusion and improves productivity for end users who rely on accurate, current records.

Tags: