Datatable using GraphQL in LWC

Hello friends, today we are going to discuss Datatable using GraphQL in LWC. Start with a brief overview of the challenges associated with displaying tabular data in Salesforce Lightning Web Components. Introduce GraphQL as a powerful query language and explain how it can streamline data retrieval and improve the performance of web components.

Also, check this: Delete Records in Flow Salesforce

Key Highlights :

1. Efficient Data Retrieval with GraphQL
2. Highlight the performance gains achieved by using GraphQL
3. Without using APEC Fetch data.
4. Show data in Tabular form.

Code :

datatableusingGraphQLLWC.html

<template>
	<lightning-card title="Datatable using GraphQL in LWC">
		<template lwc:if={contacts}>
				<lightning-datatable key-field="Id" data={contacts} columns={columns} hide-checkbox-column="true"
                show-row-number-column="true" onrowaction={callRowAction}>
				</lightning-datatable>
		</template>
	</lightning-card>
</template>

datatableusingGraphQLLWC.js

import { LightningElement, wire } from 'lwc';
import { gql, graphql } from 'lightning/uiGraphQLApi';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const columns = [
    { label: 'Last Name', fieldName: 'LastName' },
    { label: 'Email', fieldName: 'Email' },
    { label: 'Phone', fieldName: 'Phone', type: 'Phone' },

    {
        type: "button", label: 'View', initialWidth: 100, typeAttributes: {
            label: 'View',
            name: 'View',
            title: 'View',
            disabled: false,
            value: 'view',
            iconPosition: 'left',
            iconName: 'utility:preview',
            variant: 'Neutral'
        }
    },
    {
        type: "button", label: 'Edit', initialWidth: 100, typeAttributes: {
            label: 'Edit',
            name: 'Edit',
            title: 'Edit',
            disabled: false,
            value: 'edit',
            iconPosition: 'left',
            iconName: 'utility:edit',
            variant: 'Neutral'
        }
    },

];

export default class DatatableusingGraphQLLWC extends NavigationMixin(LightningElement) {
    contacts;
    columns = columns;
    errors = undefined;

    @wire(graphql, {
        query: gql`query ContactDetail {
            uiapi {
              query {
                Contact(
                  first: 10
                  orderBy: { LastModifiedDate: { order: DESC } }
                ) {
                  edges {
                    node {
                      Id
                      LastName {
                        value
                      }
                      Email {
                        value
                      }
                      Phone {
                        value
                      }
                    }
                  }
                }
              }
            }
          }          
        `
    })

    function({ data, errors }) {
        if (data) {
            var conts = [];
            //retrieve result in variable
            var con = data.uiapi.query.Contact.edges.map((edge) => edge.node);
            console.error(JSON.stringify(con));
            var len = con.length;
            for (var i = 0; i < len; i++) {
                conts.push({
                    Id: con[i].Id,
                    LastName: con[i].LastName.value,
                    Email: con[i].Email.value,
                    Phone: con[i].Phone.value,
                });
            }
            this.contacts = conts;
        }
        if (errors) {
            this.errors = errors;
            this.contacts = undefined;
        }
    }

    callRowAction(event) {
        const recId = event.detail.row.Id;
        const actionName = event.detail.action.name;
        if (actionName === 'Edit') {
            this.handleAction(recId, 'edit');
        } else if (actionName === 'View') {
            this.handleAction(recId, 'view');
        }
    }
    
    handleAction(recordId, mode) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: recordId,
                objectApiName: 'Contact',
                actionName: mode
            }
        })
    }

    showToast(title, message, variant, mode) {
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: mode
        });
        this.dispatchEvent(evt);
    }
}

datatableusingGraphQLLWC.js-meta.xml

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
		<target>lightning__Tab</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. GraphQL in LWC Salesforce
2. Salesforce GraphQL API
3. GraphQL API