I have actually 2 Lightning web components- 1.) lwcPropertyList 2.) lwcProperyDetail
USECASE -> When I update any of the field on the record-from(present on lwcPropertyDetail), it is required that the apex method(ApexWireMethodToProperty) must be called again. I'am using 'refreshApex()' but it is not working?
lwcPropertyList.js
import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import getPropertyList from '@salesforce/apex/MyPropertyController.getPropertyList'
import { registerListener, unregisterAllListeners, fireEvent } from 'c/pubsub';
import { refreshApex } from '@salesforce/apex';
const DELAY = 100;
export default class LwcPropertyList extends LightningElement {
searchKey = '';
maxPrice = 9999999;
bedrooms = 0;
bathrooms = 0;
connectedCallback() {
registerListener(
'dreamhouse__filterChange',
this.handleFilter,
this
);
registerListener(
'PropertyDetailUpdate',
this.handleUpdate,
this
);
console.log('connected callback called');
}
disconnectedCallback() {
console.log('disconnected');
unregisterAllListeners(this);
}
@wire(CurrentPageReference) pageRef;
@wire(getPropertyList, {
searchKey: '$searchKey',
maxPrice: '$maxPrice',
bedrooms: '$bedrooms',
bathrooms: '$bathrooms'
})
properties;
handleFilter(filters) {
window.clearTimeout(this.delayTimeout);
// eslint-disable-next-line @lwc/lwc/no-async-operation
this.delayTimeout = setTimeout(() => {
this.searchKey = filters.searchKey,
this.maxPrice = filters.maxPrice,
this.bedrooms = filters.bedrooms,
this.bathrooms = filters.bathrooms
}, DELAY);
console.log('handle filters' + filters);
}
**handleUpdate(payload) {
refreshApex(this.properties);
console.log('handleUpdate');
}**
handlePropertySelected(event) {
console.log('application event is fired from here');
fireEvent(this.pageRef, 'dreamhouse__propertySelected', event.detail);
console.log('fired appli event' + event.detail);
}
}
lwcPropertyDetail.js
import { LightningElement, api, wire } from 'lwc';
import { registerListener, unregisterAllListeners,fireEvent } from 'c/pubsub';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { CurrentPageReference } from 'lightning/navigation';
import NAME_FIELD from '@salesforce/schema/Property__c.Name';
import BED_FIELD from '@salesforce/schema/Property__c.Beds__c';
import BATH_FIELD from '@salesforce/schema/Property__c.Baths__c';
import PRICE_FIELD from '@salesforce/schema/Property__c.Price__c';
import BROKER_FIELD from '@salesforce/schema/Property__c.Broker__c';
import PICTURE_FIELD from '@salesforce/schema/Property__c.Picture__c';
export default class LwcPropertyDetail extends LightningElement {
propertyId;
propertyFields = [BED_FIELD, BATH_FIELD, PRICE_FIELD, BROKER_FIELD];
@wire(CurrentPageReference) pageRef;
@wire(getRecord, {
recordId: '$propertyId',
fields: [NAME_FIELD, PICTURE_FIELD]
})
property;
get propertyName() {
return getFieldValue(this.property.data, NAME_FIELD);
}
get propertyPicture() {
return getFieldValue(this.property.data, PICTURE_FIELD);
}
connectedCallback() {
registerListener(
'dreamhouse__propertySelected',
this.handlePropertySelected,
this
);
}
disconnectedCallback() {
unregisterAllListeners(this);
}
handlePropertySelected(propertyId)
{
console.log('sibling handler' + propertyId);
this.propertyId = propertyId;
}
handleSubmit(event)
{
event.preventDefault();
this.template.querySelector('lightning-record-form').submit();
fireEvent(this.pageRef,'PropertyDetailUpdate','');
console.log('handle Submit');
}
}
Record-form on lwcPropertyDetail
<lightning-record-form
object-api-name="Property__c"
record-id={propertyId}
fields={propertyFields}
columns="2"
onsubmit={handleSubmit}></lightning-record-form>