LWC - apex refresh of data table from data retrieved using @wire

Question

I have a lighting web component datatable that is populated from and @wire call. Below are the key snippets from my code

    import { LightningElement, api, wire, track } from 'lwc';
    import getOrderlines from '@salesforce/apex/PP_OrderController.getOrderlines';
    import { refreshApex } from '@salesforce/apex';
    ..
    
    export default class Orderlines extends LightningElement {
    
       @api orderId;
      @track wiredDataResult;
    
    ...
     @wire(getOrderlines, {orderId: '$orderId'}) processOrderline({data, error}) {
            this.wiredDataResult = data;
            this.orderlines = this.wiredDataResult.listOliWrapper;
    
    ...

This is used to populate a datatable:

    <lightning-datatable
            key-field="orderLineId"
            data={orderlines}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}
            hide-checkbox-column>
        </lightning-datatable>

This is all working fine.

In the handleSave() after sending the update to apex controller (which saves fine), I'm trying to refresh the page using refreshApex

     refreshApex(this.wiredDataResult).then(() => {
           //Clear all draft values in the datatable
           this.draftValues = [];
     }); 

However, I'm getting error from above line as the promise is not being handled. Error:

TypeError: Cannot read properties of undefined (reading ‘then’)“.

I've tried rewriting the @wire to :

    @wire(getOrderlines, {
            orderId: ‘$orderId’
        }) processOrderline( result) {
            console.log(‘result’ + JSON.stringify(result));
            console.log(‘result.data ’ + JSON.stringify(result.data));
            this.wireResult = result;
            this.wiredDataResult = result.data;
            this.orderlines = this.wiredDataResult.listOliWrapper;

so that I can call the refresh apex on wireResult (rather than the data part only):

    refreshApex(this.wireResult).then(() => {
                     //Clear all draft values in the datatable
                    this.draftValues = [];
                }); 

However with this approach the @wire is not populating the result object. In the console.log message in the promise I'm getting:

result{}
result.data undefined

and thus the table is not showing on screen.

Any ideas or how to fix this?

Answer 1

Thanks to @PhilW for the tip 'The wire function is called first with an empty result and later with either data or error content.' I was not aware of that and I was not handling the first empty result properly.

Updated the code to

@wire(getOrderlines, {orderId: '$orderId'}) processOrderline(result) {

    this.wiredResult = result;
    const { data, error } = result;
    
    if (data) { ...

And then refresh apex to

refreshApex(this.wiredResult).then(() => {
    //Clear all draft values in the datatable
   this.draftValues = [];
}); 

Works now!

Answer 2

If processOrderline({data, error}) is giving you data, result.data also should give you.. This is just standard deconstruction in js

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

You may need to check PP_OrderController.getOrderlines and what is value of orderId