Refresh GraphQL Query Result in Lightning Web Components Salesforce ☁️⚡️

Kapil December 22, 2023

In this blog I will show you how you can refresh the GraphQL query results in your Lightning Web Components.

The GraphQL wire adapter automatically caches your query results to improve the loading performance of subsequent queries. You can trigger a refetch of the query results and update the cache by calling the refreshGraphQL(result) function.

When calling refreshGraphQL, you must pass the exact object that was previously passed to your wire function or variable. The wire function or variable must preserve the original value from the wire adapter and can’t use a destructuring parameter assignment. 

In below example I am retrieving a list of Account records. After retrieving the list we will update the Account Name value and trigger the GraphQL refresh from the LWC to get the latest data.


refreshGraphQL.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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);
    }
}


Output


Checkout Complete Video Tutorial Below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments