Home SalesforceLightning Displaying Tabular Data with GraphQL in Lightning Web Component

Displaying Tabular Data with GraphQL in Lightning Web Component

by Dhanik Lal Sahni
GraphQL in LWC - Salesforce

GraphQL improves web development by providing more efficient data fetching, greater flexibility for frontend demands, simplified backend development, improved developer experiences, support for real-time data, and technology agnosticism. These benefits make it a valuable tool in current web development. In this post, we will fetch data using GraphQL in the Lightning Web component and display data in tabular format.

Refer to our other posts Generate GraphQL Query in Salesforce Apex and Exploring GraphQL API in Salesforce for using GraphQL in Salesforce Apex.

GraphQL API in Lightning Web Component

Using GraphQL Wire Adapter, we can query Salesforce data using SOQL-like queries. We can also add filtering and data aggregation in GraphQL queries. Lightning Data Service will handle queried data so we can leverage its caching mechanism as well.

Check out this post for the Benefits of the GraphQL Wire Adapter.

How to use GraphQL Wire Adapter in LWC?

We can use GraphQL Wire Adapter in Lightning Web component using the below 2 steps

  1. Create a query to show data in tabular format. You can check Generate GraphQL Query in Salesforce Apex also to generate the query. You can use the Altair or Postman tool to validate the query.
  2. Import Salesforce GraphQL Wire Adapter (graphql) and tagged template function (gql) in LWC code. gql identify GraphQL queries and graphql wire adapter used to retrieve the results of your GraphQL query. Data is automatically retrieved and emitted back to your component.

When the record is returned it shows data in the below format

    "Id": "a032v00006W05QBAAZ",
    "Name": {
      "value": "Reliance TV 48 Inch"
    "UnitPrice__c": {
      "value": 810008
    "Discount__c": {
      "value": null
    "Product_Description__c": {
      "value": null
    "ProductNum__c": {
      "value": "P000004"

Based on our requirements, we can format the result. For this post, we will create an object array that will shown in the datatable component. Records are retrieved using node data.uiapi.query.Product__c.edges similar to the below LWC code.

LWC Code

This code will retrieve product records having a quantity greater than 0. The returned result is shown as a data table. We can use any filter criteria based on business requirements.

Demo Page

GraphQL in Lightning Web Component - SalesforceCodex


GraphQL API for Lightning Web Components

Related Posts

Exploring GraphQL API in Salesforce

Generate GraphQL Query in Salesforce Apex

Dynamically Instantiate Components in LWC

Low Code Integration for Text Translation using Systran API

Extract Demographic Details using Trestle Reverse Phone API

Verify Phone in Salesforce using VeriPhone API

Named Entity Recognition using Salesforce Einstein API

AWS Signature 4 Signing in Salesforce

Upload File to AWS S3 Server

You may also like


Vishal Shukla February 1, 2024 - 9:11 am

Hello Dhanik,

I’m using GraphQL wire adapter in LWC to fetch large number of data. But unfortunately it only returns first 10 records. I don’t want to specify the first parameter as that would make it static. I want it to dynamically fetch all data without specifying the first parameter in GraphQL Query. Can you please help me with this?

Sample GraphQL Query
get productQuery() {
if (!this.pricebookId) return undefined;
return gql`
query GetProducts ($pricebookId : ID!) {
uiapi {
query {
PricebookEntry(where: {
Pricebook2Id: { eq: $pricebookId }
IsActive: { eq: true }
orderBy: {
Name: { order: ASC }
) {
edges {
node {
Product2Id {
Name {
ProductCode {
UnitPrice {

Best Regards,
Vishal Shukla

Dhanik Lal Sahni February 6, 2024 - 12:46 pm

Hello Vishal,
Let us connect to resolve your issue. You can connect using this link https://topmate.io/dhaniksahni/794312

Thank You,


Leave a Comment