GraphQL APIs in Lightning Web Components Salesforce | #GraphQL LWC Stack ☁️⚡️

Kapil October 29, 2023

 In this blog we will learn about GraphQL APIs and how you can use it in Lightning Web Components with couple of examples.

The GraphQL wire adapter manages your data using Lightning Data Service (LDS). You don’t need different wire adapters for each query defined in the GraphQL schema, unlike the other wire adapters. Instead, LDS provides a single wire adapter that accepts a GraphQL query document and a variables map.

Parameters 

query— (Required) Parsed GraphQL query. Parse the query using the gql JavaScript template literal function. gql parses the GraphQL query into a format that the wire adapter can use. gql isn’t reactive.

variables—A key-value pair of dynamic values for the gql query. Use variables with a getter function so the wire adapter can react to changes.

operationName—The name of the operation you want to perform in the query. Use operationName to select the operation to run if your GraphQL query defines more than one operation. We recommend labeling your queries with query operationName instead of using the shorthand syntax query for improved debugging on the server-side to identify different GraphQL requests. For example, query bigAccounts or query serviceReports.


Example 1 - How to get list of records using GraphQL

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
    <lightning-card title="Wired with GraphQL" icon-name="utility:user">
        <div class="slds-var-m-horizontal_medium">
        <template lwc:if={results}>
            <template for:each={results} for:item="account">
            <div key={account.Id}>
                {account.Name.value}
            </div>
            </template>
        </template>
        </div>
    </lightning-card>
</template>

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
import { LightningElement,wire } from 'lwc';
import {gql,graphql} from 'lightning/uiGraphQLApi';

export default class GraphQLAccounts extends LightningElement {
  results;
  errors;

  @wire(graphql, {
    query: gql`
      query AccountWithName {
        uiapi {
          query {
            Account(first: 5) {
              edges {
                node {
                  Id
                  Name {
                    value
                  }
                }
              }
            }
          }
        }
    }`,
  })
  graphqlQueryResult({ data, errors }) {
    if (data) {
      this.results = data.uiapi.query.Account.edges.map((edge) => edge.node);
    }
    this.errors = errors;
  }
}


Output



Example 2 - Get list of records with filter criteria using reactive variable


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
26
27
<template>
    <lightning-card title="Wired with Parameters" icon-name="utility:user">

        <div class="slds-var-m-horizontal_medium">
            <lightning-combobox
            name="minAmount"
            label="Amount"
            value={minAmount}
            placeholder="Select a minimum amount"
            options={minAmounts}
            onchange={handleMinAmountChange}
            >
            </lightning-combobox>

            <template lwc:if={records}>
            <template for:each={records} for:item="account">
                <div class="card-spacer" key={account.Id}>
                <lightning-card icon-name="standard:account">
                    <h1 slot="title">{account.Name.value}</h1>
                    {account.AnnualRevenue.displayValue}
                </lightning-card>
                </div>
            </template>
            </template>
        </div>
  </lightning-card>
</template>


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
54
55
56
57
58
import { LightningElement, wire } from "lwc";
import { gql, graphql } from "lightning/uiGraphQLApi";

export default class AccountsGQL extends LightningElement {
  records;
  errors;

  minAmount = "1000";

  minAmounts = [
    { label: "All", value: "0" },
    { label: "1000", value: "1000" },
    { label: "2000", value: "2000" },
    { label: "3000", value: "3000" },
  ];

  @wire(graphql, {
    query: gql`
      query bigAccounts($minAmount: Currency) {
        uiapi {
          query {
            Account(where: { AnnualRevenue: { eq: $minAmount } }) {
              edges {
                node {
                  Id
                  Name {
                    value
                  }
                  AnnualRevenue {
                    displayValue
                  }
                }
              }
          }
        }
      }
    }`,
    // Use a getter function (see get variables() below)
    // to make the variables reactive.
    variables: "$variables",
  })
  graphqlQueryResult({ data, errors }) {
    if (data) {
      this.records = data.uiapi.query.Account.edges.map((edge) => edge.node);
    }
    this.errors = errors;
  }

  get variables() {
    return {
      minAmount: this.minAmount,
    };
  }

  handleMinAmountChange(event) {
    this.minAmount = event.detail.value;
  }
}


Field Functions



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

1 Comments

  1. thiagoNovember 8, 2023 at 10:31 AM

    Great post on using GraphQL with Lightning Web Components! The examples and explanations are helpful for developers looking to implement this technology. Thanks for sharing!

    https://orgcostsavings.com/cost-reduction-strategies-for-salesforce-licenses/

    ReplyDelete