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.

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.

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.

GraphQL variables allow your query to use values that aren’t known until runtime. 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.

GraphQL Variables