GraphQL in Salesforce Lightning Web Component

GraphQL in Salesforce Lightning Web Component

The GraphQL wire adapter can be used in the Salesforce Lightning Web Component.

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <div class="slds-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={accountRecords}
                columns={columns}
                hide-checkbox-column>
            </lightning-datatable> 
        </div>
    </lightning-card>
</template>

JavaScript:

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

export default class SampleLightningWebComponent extends LightningElement {
    
    
    columns = [   
        { label: 'Id', fieldName: 'Id' },
        { label: 'Name', fieldName: 'Name' },
        { label: 'Active', fieldName: 'Active__c' },
        { label: 'Industry', fieldName: 'Industry' },
        { label: 'Type', fieldName: 'Type' }
    ];

    @wire(graphql, {
        query: gql`
            query getAccounts {
                uiapi {
                    query {
                        Account(
                            where: { 
                                Active__c : { 
                                    eq : 'Yes' 
                                } 
                            }
                            first: 15
                            orderBy: { 
                                Name: { 
                                    order: ASC 
                                } 
                            }
                        ) {
                            edges {
                                node {
                                    Id
                                    Name {
                                        value
                                    }
                                    Type {
                                        value
                                    }
                                    Active__c : Active__c {
                                        value
                                    }
                                    Industry {
                                        value
                                    }
                                }
                            }
                        }
                    }
                }
            }
        `
    })
    graphql;

    get accountRecords() {
        return this.graphql.data?.uiapi.query.Account.edges.map(
            ( edge ) => ( {
                Id: edge.node.Id,
                Name: edge.node.Name.value,
                Type: edge.node.Type.value,
                Active__c: edge.node.Active__c.value,
                Industry: edge.node.Industry.value
            }
        ));
    }

}

js-meta.xml:

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

Output:

Leave a Reply