Delay GraphQL Query Execution in Lightning Web Component Salesforce

Kapil November 26, 2023


 In this blog you will learn how you can delay your GraphQL query execution. GraphQL is also a wire adapter and as wire adapter behaves it will execute on the load of the page.

Now assume a situation where the query parameters are not available on the load of the page which is required to filter out your query? In that case you need to delay your query execution until you are getting required parameters. 

To delay the execution you can use the getter parameters for your query and variable values in GraphQL and return the value as undefined if your required parameters are not available. 

For this demo I have created a lightning web component using record picker which will work on Account object and based on the selected record I will be displaying the related Contacts accordingly!

Below is the code snippet of the demo, to understand the functionality in more details please watch video tutorial below - 


delayGraphQL.html

 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
<template>
    <lightning-card
        title="Get Related Contacts using GraphQL"
        class="slds-card__body_inner"
        icon-name="standard:search"
    >
        <div class="slds-var-m-around_medium">
            <lightning-record-picker
                lwc:ref="recordPicker"
                object-api-name="Account"
                placeholder="Search..."
                label="Select a record"
                onchange={handleChange}
            >
            </lightning-record-picker>
        </div>
        <div class="slds-var-m-around_medium">
            <template lwc:if={contacts}>
                <template for:each={contacts} for:item="contact">
                    {contact.Name.value}
                </template>
            </template>
        </div>
    </lightning-card>
</template>


delayGraphQL.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
42
43
44
45
46
47
48
49
50
51
52
53
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/uiGraphQLApi";

export default class DelayGraphQL extends LightningElement {
    selectedRecordId = '';
    contacts;
    errors;
    
   handleChange(event) {
        this.selectedRecordId = event.detail.recordId;
        console.log("🚀 ~ this.selectedRecordId:", this.selectedRecordId);
   }
    
    @wire(graphql, {
        query: "$accountQuery",
        variables: "$accountData",
    })
        
  graphqlQueryResult({ data, errors }) {
        if (data) {
        this.contacts = data.uiapi.query.Contact.edges.map((edge) => edge.node);
        }
        if (errors) {
            this.errors = errors;
        }
    }
    
    get accountQuery() {
        if (!this.selectedRecordId) return undefined;    
        return gql`
        query contactsOnAccount($recordId: ID!) {
            uiapi {
            query {
                Contact(where: { AccountId: { eq: $recordId } }) {
                edges {
                    node {
                        Id
                        Name {
                            value
                        }
                    }
                }
            }
            }
        }
        }`;
    }
    get accountData() {
        return {
          recordId: this.selectedRecordId,  
        };
    }
}


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