working with the refreshApex feature in LWC

Question

Okay, i'm looking to see if I can get some help in understanding the documentation as laid out here: https://developer.salesforce.com/docs/component-library/documentation/lwc/reference_salesforce_modules

I want to refresh a component after a record CRUD operation, the form is being populated from a call to an apex method. The data from this method (called with the @wire service) is then passed into a js function that splits the data into complete and incomplete todo items. Wire service call is:

  @wire(getTodos, {
    searchKey: '$searchString'
  })
  sendForSplitting({
    error,
    data
  }) {
    if (error) {
      this.error = error;
    } else if (data) {
      this.splitTodos(data);
    }
  }

In an event handler i want to trigger an update to this dataset, the documentation above seems to reference that I can refresh the apex on a wired method. From that doc:

To refresh a wired method, you must pass the argument the wired method receives (which is the wired value).

To date, I have tried both:

  handleCreate() {
    return refreshApex(getTodos, {
      searchKey: '$searchString'
    });
  }

and

  handleCreate() {
    return refreshApex(this.sendForSplitting({
      error,
      data
    }));
  }

Both of which throw errors - refresh failed because configuration is not available. How can I make this work? I want to ensure the lists update upon user interaction without having to resort to a manual refresh of the page...

Answer 1

Going by the documentation, it seems you will need to create an additional property and utilize that in your wired function.

To refresh a wired method, pass the argument the wired method receives (which is the wired value) to refreshApex(). In this sample code, the wired method is wiredGetActivityHistory(value). Hold on to the value provisioned by the wire service and pass it to refreshApex().

You will need to declare another variable, say mySendForSplitting and then utilize that in your sendForSplitting, something as:

sendForSplitting({error,data}) {
    this.mySendForSplitting = data;
    // rest of the code
}

And then use refreshApex() as below:

refreshApex(this.mySendForSplitting);

You can find an example on the lwc-recipe as well.

Answer 2

I have the same issue and the solution was to put refreshApex inside .then() method after successfully calling the server.

Here is the working example:

import { LightningElement, wire, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import findSomething from '@salesforce/apex/ApexController.findMethod';
import changeSomething from '@salesforce/apex/ApexController.changeMethod';
import {refreshApex} from '@salesforce/apex';

findSomething
changeSomething
@track paramForChangeOne
@track paramForChangeTwo

@wire(findSomething, { paramOne: '$paramOne', paramTwo: '$paramTwo' }) findSomething;

callFromHtml(){
        changeSomething({paramForChangeOne: this.paramForChangeOne, paramForChangeTwo: this.paramForChangeTwo})
        .then(result => {
            if(result){
                this.showNotification('success', 'Success Message', '');
            }
            // refreshing table data using refresh apex(HERE NEEDS TO BE SET)
            refreshApex(this.findSomething);
        })
        .catch(error => {
            console.log(error);
        });
    }