Using @api global variable showing undefined value in Salesforce Lwc in wire method

Question

I am using global variable @api filter in wire method in child component. Defined this variable with default value="". I am passing value say 'xyz' to this filter parameter from parent lwc component. When the child component is called sometimes the variable showing "" and sometimes showing "xyz". Why there is inconsistency and how to make this variable to have value what i assigning from Parent Component. Below is the code:

@api filter ="";
@wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            const filter = this.filter;
             console.log('filterval'-->filter);--->displaying "" instead of "xyz"
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

Answer 1

The wire method is going to cache the result based on the input parameters. As such, if you want the wire method to always return the correct result, you need to use a reactive parameter:

@api filter ="";
@wire(getContactList, { filter: '$filter' })

Otherwise, you might want to use a backing variable so you can detect changes:

_filter;
@api set filter(value) {
  this._filter = value;
}
get filter() {
  return this._filter;
}