Refresh GraphQL Query Results in Lightning Web Components

Posted by Vinay Vernekar 17th November 2025

Learn how to trigger a fresh GraphQL query in Lightning Web Components using refreshGraphQL(). Includes example LWC code and best practices.

Why refreshGraphQL matters

Salesforce’s GraphQL wire adapter caches results to speed up subsequent queries. When your UI updates server-side data (for example updating an Account record from an LWC), you’ll often want to re-run the query and update the cache so users see the latest data without a full page reload.

How the GraphQL wire adapter caches results

The GraphQL wire adapter preserves the object passed to your wired function or variable and caches the query result. To trigger a refetch and update the cache you call refreshGraphQL(result) passing exactly the same “result” object your wire function received. Note: do not destructure the parameter in the wire function — preserve the original value.

Example: retrieve Account list, update and refresh

Below is a minimal Lightning Web Component example that queries the first 5 Account records, displays their names and exposes a Refresh button that triggers refreshGraphQL to fetch updated results.

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

  • Preserve the entire wire result object in a property (do not destructure parameters) so you can pass it back to refreshGraphQL.
  • Only call refreshGraphQL with the same result object returned by the wire adapter.
  • Use refresh when you need the latest data after server-side updates — it updates the cache and re-renders your LWC without a full page reload.

Where this applies

Use refreshGraphQL in LWCs that rely on uiapi GraphQL queries where you update records from the client or another process and want the UI to reflect changes immediately. It’s useful in data editors, inline-update components and interactive dashboards built with LWC.

Conclusion

refreshGraphQL is a small but powerful API for keeping client-side GraphQL data in sync with server changes. For Salesforce admins and developers it means faster feedback loops and cleaner UI updates with minimal code changes.

If you have any questions please leave a comment below.

Tags: