Make Your Variables Reactive

Use the variables configuration parameter of the graphql wire adapter to supply dynamic values to your GraphQL query.

The graphqlVariables component in the lwc-recipes repo returns contact data based on a dynamic search string.

Tip

Implement GraphQL Variables in LWC

Let’s say you have a component that displays a dropdown with several options to represent different annual revenue amounts. Selecting an amount returns the accounts whose annual revenue is greater or equal to the amount. In this example, the $minAmount GraphQL variable enables the component to set and change the minimum amount, displaying the corresponding records when the value changes.

1//accountsGQL.js
2import { LightningElement, wire } from "lwc";
3import { gql, graphql } from "lightning/graphql";
4
5export default class AccountsGQL extends LightningElement {
6  records;
7  errors;
8
9  minAmount = "5000000";
10
11  minAmounts = [
12    { label: "All", value: "0" },
13    { label: "$5,000,000", value: "5000000" },
14    { label: "$50,000,000", value: "50000000" },
15    { label: "$500,000,000", value: "500000000" },
16  ];
17
18  @wire(graphql, {
19    query: gql`
20      query bigAccounts($minAmount: Currency) {
21        uiapi {
22          query {
23            Account(where: { AnnualRevenue: { gte: $minAmount } }) {
24              edges {
25                node {
26                  Id
27                  Name {
28                    value
29                  }
30                  AnnualRevenue {
31                    displayValue
32                  }
33                }
34              }
35            }
36          }
37        }
38      }
39    `,
40    variables: "$variables", // Use a getter function to make the variables reactive
41  })
42  graphqlQueryResult({ data, errors }) {
43    if (data) {
44      this.records = data.uiapi.query.Account.edges.map((edge) => edge.node);
45    }
46    this.errors = errors;
47  }
48
49  get variables() {
50    return {
51      minAmount: this.minAmount,
52    };
53  }
54
55  // Called when the user selects a new minimum amount
56  handleMinAmountChange(event) {
57    this.minAmount = event.detail.value;
58  }
59}

Next, create the dropdown in your component to enable input selection. Selecting an option on the dropdown triggers the handleMinAmountChange function and sets the new value on the minAmount variable, which updates the query results based on the selected amount.

1<!-- accountsGQL.html -->
2<template>
3  <lightning-card title="accountsGQL" icon-name="standard:account">
4    <div class="slds-var-m-horizontal_medium">
5      <lightning-combobox
6        name="minAmount"
7        label="Amount"
8        value={minAmount}
9        placeholder="Select a minimum amount"
10        options={minAmounts}
11        onchange={handleMinAmountChange}
12      ></lightning-combobox>
13
14      <template lwc:if={records}>
15        <template for:each={records} for:item="account">
16          <div class="card-spacer" key={account.Id}>
17            <lightning-card icon-name="standard:account">
18              <h1 slot="title">{account.Name.value}</h1>
19              {account.AnnualRevenue.displayValue}
20            </lightning-card>
21          </div>
22        </template>
23      </template>
24    </div>
25  </lightning-card>
26</template>

GraphQL variables allow your query to use values that aren’t known until run time. They also reduce the size of your component by eliminating the need for multiple queries that are near-duplicates.

GraphQL variables can’t be used to pass the names of objects or fields. This is a limitation of the GraphQL syntax and the way the Salesforce GraphQL schema is designed.

Note

Make Your Variables Reactive

Implement GraphQL Variables in LWC

See Also