Responsive Advertisement

How to prevent wired method from getting called?

 Quite a common requirement, isn't it? You want to use the advantages of wire adapter, but flexibility of imperative apex call in Lightnint Web Component. You don't want the wired method to run when certain conditions are met. In this blog, we will tackle the same problem.

Wire Service and Syntax

Wire is decorator defined in lwc module. Decorators are one of the Design Patterns, which extend the functionality of an object, without modifying its underlying behavior. On a high level, consider it as a wrapper around whatever is passed to it as argument. Wire service provisions immutable stream of data by calling the adapter passed to it. It takes two arguments, one adapter, second configurations for that adapter. A wire adapter usually is a function, and configurations are the function parameters (named parameters) for the same.

code snippet showing syntax for wire service call, language: Javascript

Food for thought: Can we use wire service outside of LightningElement?

 Wire service has some pretty good tricks up its sleeve. First and foremost, client side caching. Wire service delegates the flow to lwc engine. And, usually if the data is available in the client cache and not stale, it won't make a server call, rather pick it up from cache. It provisions data without implict invocation, and can be reactive to certain properties. The result from wire call is read-only and immutable, hence wire service can only be used to get/read data.

From the example above, you can see, there are two ways to attach the result from a wired adapter. Through a private property (wire and api cannot be used together), or a private function. When to use what? If you want to derive new data from the result as soon as it is recieved, use a wired function, otherwise for most of the cases, a wired property will do the job.

code snippet showing derived property from wire service data, language: Javascript

Reactive Properties for Wire Service

In the wire adapter config, which is an object, you can use either static value (means value will be used onlu once to provision data) or dynamic (means if the value if the attribute changes, wire will automatically provision data). The reactive attribute should be a string in the form of $propertyName (append propertyName), and lwc engine refers it as this.propertyName.
Did you know? You can pass output of one wire service as input to another. You can run wire services sequentilly.

No call, if property undefined

Properties in the adapterConfig object can’t be undefined. If a property is undefined, the wire service doesn’t provision data. (source: https://developer.salesforce.com)
This is the key to solve our use case. In our adapterConfig, one property can remain undefined until needed. As it is undefined, wire service will not provision data. By making the property reactive (appending with $), whenever the property value changes from undefined to something else, wire service will automatically provision data.

code snippet showing sequential and conditional wire service call, language: Javascript

In the code above, the getQueryResult wire adapter will only be called if myDomain.data is not undefined. Hence, we are calling sequentially.

And, that is it for this blog. Hope it helps you in your adventures in Salesforce. Merry Christamas 🎅! 

Post a Comment

0 Comments