How to prevent LWC Wire from loading data automatically?

Question

I would like to prevent the @wire function from loading automatically on initialization and instead load it on command.

Currently I am using refreshApex() now to load it on command, but I don't want to load it until a button triggers it to load.

The purpose of my question is to add a Sync button which load a good amount of data on click only.

How can I achieve this?

Answer 1

Don't call it via the wire service. Call the Apex method imperatively in your button's onclick handler.

Answer 2

Wire methods with reactive properties don't call Apex until their reactive values are set to any value other than undefined. In other words, if you do this:

someProperty;
@wire(someMethod, { someProperty: '$someProperty' }) someWireProperty;
handleClick() {
  this.someProperty = someNonUndefinedValue;
}

It won't call the Apex method until the parameters have definition.

Note that if you have a handler instead of a property, it'll still call the method once to set the default object ({ data: undefined, error: undefined }).