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.
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:
<strong>query</strong>—(Required) Parsed GraphQL query. Parse the query using thegqlJavaScript template literal function.gqlparses the GraphQL query into a format that the wire adapter can use.gqlisn’t reactive. If you include${}string interpolation constructs, they’re evaluated one time only when the template literal is expanded.<strong>variables</strong>—A key-value pair of dynamic values for thegqlquery. Usevariableswith a getter function so the wire adapter can react to changes.<strong>operationName</strong>—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 withquery operationNameinstead of using the shorthand syntaxquery. For example,query bigAccountsorquery serviceReports.
Here is an example of how to use the <strong><em>graphql</em></strong> 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; | |
| } |
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 <strong>lightning/graphql</strong> 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 | |
| } |
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 | |
| }; | |
| } | |
| } |
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.
- The Magic of Lightning Web Components (LWC) Wire Adapter
- Maximize User Interaction: GraphQL, LWC, and Toasts
- Beyond Manual: Accelerating Software Development through Automated Regression Testing
Pingback: Maximize User Interaction: GraphQL, LWC, and Toasts