Unlocking the Power of GraphQL in Salesforce LWC

GraphQL is a powerful querying language that allows developers to retrieve only the data they need from Salesforce in a more efficient and flexible way than traditional REST API calls. In Salesforce, GraphQL can be used with Lightning Web Components (LWC) to retrieve data from Salesforce objects.

One of the main advantages of using GraphQL in Salesforce is its ability to retrieve data from multiple objects in a single query. This allows developers to retrieve related data and avoid the need for multiple REST API calls, which can be both time-consuming and difficult to maintain.

Another advantage of using GraphQL in Salesforce is its ability to filter data based on specific conditions. With GraphQL, developers can use filters and variables to retrieve only the data they need, making their queries more efficient and reducing the amount of unnecessary data retrieved.

Advertisements

In addition to retrieving data, GraphQL can also be used to create, update, and delete records in Salesforce. This can be done using mutations, which are similar to queries but are used to make changes to data in Salesforce.

To use GraphQL in Salesforce LWC, developers can use the graphql function from the lightning/graphql module. This function takes in a GraphQL query and returns the data in the form of a JavaScript object.

Note: This feature is not generally available and is being piloted with a small number of customers under certain conditions.

You can import an identifier and pass in a configuration for the properties on your component. The parameters are:

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. If you include ${} string interpolation constructs, they’re evaluated one time only when the template literal is expanded.
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 that you want to perform in the query. For improved debugging on the server-side that easily identifies different GraphQL requests, we recommend labeling your queries with query operationName instead of using the shorthand syntax query. For example, query bigAccounts or query serviceReports.

Here is an example of how to use the graphql function in a LWC component to retrieve data from a Salesforce object:


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

	export default class MyComponent extends LightningElement {
	@wire(graphql, {
	query: `query getAccounts {
	accounts {
	id
	name
	industry
	phone
	website
	}
	}`
	}) accounts;
	}

view raw graphqlExample.js hosted with ❤ by GitHub

In this example, we are using the graphql function to execute a query that retrieves data from the Account object. The query is defined as a template string and it specifies the fields we want to retrieve. The @wire decorator is used to bind the result of the query to the accounts property.

It’s worth noting that the graphql function is part of the lightning/graphql module, which is available in LWC.

Example to query accounts that start with a specific name.

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

	export default class ExampleGQL extends LightningElement {
	@wire(graphql, {
	query: gql`
	query AccountInfo {
	uiapi {
	query {
	Account(where: { Name: { like: "United%" } }) @category(name: "recordQuery") {
	edges {
	node {
	Name @category(name: "StringValue") {
	value
	displayValue
	}
	}
	}
	}
	}
	}
	}`
	})
	propertyOrFunction
	}

view raw graphQLExample.js hosted with ❤ by GitHub

Include a getter function in the variables parameter to allow the wire adapter to respond to data changes. For example, based on the AnnualRevenue field, return a list of accounts that match a minimum amount.

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

	export default class AccountsGQL extends LightningElement {
	records;
	errors;
	minAmount = '1000000’;

	@wire(graphql, {
	query: gql`
	query myOperationName($minAmount: Currency) {
	uiapi {
	query {
	Account(where: { AnnualRevenue: { gte: $minAmount } }) @category(name: "recordQuery") {
	edges {
	node {
	Id
	Name @category(name: "StringValue") {
	value
	}
	AnnualRevenue @category(name: "CurrencyValue") {
	displayValue
	}
	}
	}
	}
	}
	}
	}`,
	variables: '$myVariables',
	operationName: 'myOperationName',
	})
	graphqlQueryResult({ errors, data }) {
	if (data) {
	this.records = data.uiapi.query.Account.edges.map(edge => edge.node);
	this.errors = undefined;
	} else if (errors) {
	this.errors = errors;
	}
	}

	get myVariables() {
	return {
	minAmount: this.minAmount
	};
	}
	}

view raw graphQLExample1.js hosted with ❤ by GitHub

In conclusion, GraphQL provides a powerful and efficient way to retrieve and manipulate data in Salesforce. With the ability to retrieve data from multiple objects, filter data based on specific conditions, and create, update and delete records, GraphQL is a valuable tool for developers working with Salesforce LWC.