GraphQL API To Get The List Of Records In LWC

GraphQL API in LWC

In the rapidly evolving world of customer relationship management (CRM), Salesforce has established itself as a powerhouse platform that empowers businesses to streamline their operations, enhance customer interactions, and drive growth. One of the exciting advancements that Salesforce has embraced is GraphQL, a query language for APIs that offers a more flexible and efficient approach to fetching and manipulating data. In this blog, we’ll explore how GraphQL is transforming data management in Salesforce, and enabling us to fetch sObject records directly using its API.

GraphQL Implementation using LWC

This blog post centers on our approach to retrieving Salesforce Account records using GraphQL API and presenting them in the user interface through the use of LWC.

displayAccListWithoutApex.html

<template>
  <lightning-card title="Display Account List without using Apex" icon-name="custom:custom15">
    <div class="slds-m-around_medium">
      <template if:true={accounts}>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered"
          aria-labelledby="element-with-table-label other-element-with-table-label">
          <thead>
            <tr class="slds-line-height_reset">
              <th class="" scope="col">
                <div class="slds-truncate" title="Opportunity Name">Account Name</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Account Name">Website</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Close Date">Phone</div>
              </th>
              <th class="" scope="col">
                <div class="slds-truncate" title="Stage">Industry</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <template for:each={accounts} for:item="account">
              <tr key={account.Id} class="slds-hint-parent">
                <th data-label="Account Name" scope="row">
                  <div class="slds-truncate" title="Name">
                    <a href="#" tabindex="-1">{account.Name.value}</a>
                  </div>
                </th>
                <td data-label="Website">
                  <div class="slds-truncate" title="Website">{account.Website.value}</div>
                </td>
                <td data-label="Phone">
                  <div class="slds-truncate" title="Phone">{account.Phone.value}</div>
                </td>
                <td data-label="Industry">
                  <div class="slds-truncate" title="Industry">{account.Industry.value}</div>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </template>
    </div>
  </lightning-card>
</template>

displayAccListWithoutApex.js

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

export default class DisplayAccListWithoutApex extends LightningElement {
    @track accounts = [];
    @wire(graphql, {
        query: gql`
            query accountList {
                uiapi {
                    query {
                        Account {
                            edges {
                                node {
                                    Id
                                    Name {
                                        value
                                    }
                                    Website {
                                        value
                                    }
                                    Phone {
                                        value
                                    }
                                    Industry {
                                        value
                                    }
                                }
                            }
                        }
                   }
              }
        }`
    })
        //wired method
        getAccounts({data, error}){
            if(data){
                console.log("GraphQL Data->>>>", JSON.stringify(data.uiapi.query.Account.edges));
                
                this.accounts = data.uiapi.query.Account.edges.map((edge) => edge.node);
                console.log('Accounts->>>>', this.accounts);
            }
            else if(error){
                console.error('Error->>>>', error);
            }
        }
}

displayAccListWithoutApex.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>57.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
  </targets>
</LightningComponentBundle>

In the JavaScript file above, observe that we imported two attributes gql, and graphql from the uiGraphQLApi wire adapter. This enables us to execute queries on the client side. With these attributes, we retrieved Account fields such as ID, Name, Phone, etc., to showcase on the UI.

We seamlessly integrated this LWC component into an App page, which will also allow us the flexibility to use it wherever needed.

The output is shown below:

List of Accounts in LWC using GraphQL

Limitation of using GraphQL API

By default, the graphQL wire adapter returns the first 10 results. We can request subsequent pages using the cursor information but up to 2000 records as of now.

Advantages of using GraphQL API

Some advantages of using GraphQL API are below:

• Field selection
• Resource aggregation
• Schema introspection
• sObject queryability

Conclusion

The adoption of GraphQL in Salesforce has opened new doors for developers and businesses to harness the power of efficient and flexible data management. By enabling customized queries, reducing over-fetching, and providing real-time updates, GraphQL enhances the Salesforce experience and drives improved application performance.

Resources

GraphQL API | Get started

uiGraphQLApi Wire Adapters

Paginate Results in GraphQL

Example Implement of Pagination in LWC