GraphQL API for Lightning Web Components

GraphQL is a query language used to interact with APIs and a runtime that executes queries on existing data. Facebook developed this language in 2012 and released it as an open-source project in 2015. Unlike traditional RESTful APIs, GraphQL offers a more efficient, powerful, and flexible way to interact with APIs.

Learn more about GraphQL at graphql.org and GraphQL Architecture

Here's a breakdown of what GraphQL is and its key features:

Query Language: GraphQL allows clients to request the data they need from an API. Clients can specify the fields and relationships to retrieve, eliminating over-fetching and under-fetching data.

Hierarchical Structure: GraphQL queries have a hierarchical structure similar to the shape of the data they retrieve. This allows clients to request nested data in a single query, reducing the number of round-trips to the server.

Strongly Typed Schema: GraphQL APIs are built on top of a strongly typed schema that defines the types of data available and the operations that can be performed. This schema is a contract between clients and servers, enabling powerful tooling and introspection.

Single endpoint: Unlike traditional RESTful APIs, which typically expose multiple endpoints for different resources, GraphQL APIs streamline the process. Clients send queries to this single endpoint, and the server responds with the requested data, simplifying the interaction. 

Real-Time Updates: GraphQL supports subscriptions, allowing clients to subscribe to real-time updates from the server. This is useful for implementing features like live notifications, chat, and real-time dashboards.

Tooling: GraphQL has a rich ecosystem of tools and libraries for building, testing, and debugging GraphQL APIs. This includes tools for generating client-side code, testing queries, and monitoring API performance.

GraphQL is a modern way to interact with APIs, making it more efficient and flexible. It's popular among companies like Facebook, GitHub and Shopify. 

Schema Structure

schema {
    query: Query
    mutation: Mutation

}

Query- Provides an entry point for read operations.

Mutation- Provides an entry point for create, update, and delete operations. Mutation is available in API v59.0 and later.

GraphQL Architecture Showing Integration with Multiple Systems

Here's an example of how you can use gql and graphql from the lightning/uiGraphQLApi module in a Lightning Web Component (LWC):

Create a new Lightning Web Component.

In the JavaScript file (graphqlExample.js), import gql and graphql from the lightning/uiGraphQLApi module.

import { LightningElement,wire } from 'lwc';
import {gql,graphql} from 'lightning/uiGraphQLApi';
export default class graphqlExample extends LightningElement
{
    errors;
    accounts;
    @wire(graphql,{
        query:gql`
        query AccountInfo{
            uiapi{
                query{
                    account(first:5){
                        edges{
                            node{
                                Id
                                Name{
                                    value
                                    }
                                    Industry{
                                             value 
                                             }
                                            }
                                    }
                                }
                            }
                        }
                    }
                 `
    }) getAccounts({data,errors}){
        if(data){
           this.accounts=data.uiapi.query.account.edges.map((edge)=> edge.node);
          }
          if(errors){
              this.errors=errors;
          }
      }

  }

The HTML file (graphqlExample.html) displays the data fetched from the GraphQL query.

<template>
    <lightning-card title="Accounts Details" icon-name="standard:account">
    <template lwc:if={accounts}>
        <div class="slds-var-m-around_medium">
            <template for:each={accounts} for:item="account">
                <div class="card-spacer" key={account.Id}></br>
                  <h1 slot="Title"> {account.Name.value} </h1>
                  {account.Industry.value}</br>
                </div>
            </template>
        </div>
        <template lwc:if={errors}>{errors}</template>
    </template>
</lightning-card>

</template> 

In this GraphQL example, you can fetch Account records directly without any Apex class.

GraphQL API Query Limitations

Here are a few and for more details on GraphQL API Limitations visit here.

GraphQL has the same limitations as SOQL. When working with GraphQL API queries, consider the following limitations.

Each GraphQL query can contain up to 10 subqueries.

Each subquery counts as one request for rate limiting.

Each subquery can return up to 2000 records within the same GraphQL query.

By default, the first 10 records are returned. You can use pagination information to retrieve additional records.

You can query only objects that User Interface API supports

Use the GraphQL Adapter for the following use cases

• Query Your Data
• Aggregate Your Results
• Make Your Variables Reactive
• Query Multiple Objects Dynamically
• Update Cached Query Results
• Paginate Your Results
• Display Data Using Base Components
• Use a Namespace and Alias in Managed Packages

Connect Altair GraphQL Client to Salesforce

Altair GraphQL Client is an open-source tool for debugging GraphQL queries and implementations. The client enables introspection of schema documentation through a rich interface.

Access this link to learn the prerequisites for connecting with Salesforce.

Resources for more details

GraphQL Wire Adapter Best Practices

When to Use GraphQL Wire Adapter

GraphQL Wire Adapter Limitations

Use the GraphQL Wire Adapter