Refresh @wire getRecord Manually, refreshApex not working

Question

I know this has been asked and appropriately answered HERE. However I am wondering if this is possibly done differently now as I can not get that structure to work. My code is almost exactly the same as the original.

@track _getRecordResponse;


    @wire(getRecord, { recordId: USER_ID, fields: [PHOTO_URL_FIELD] })
    userRecord(response) {
        this._getRecordResponse = response;
        let error = response && response.error;
        let data = response && response.data;
        if (data) {
            this.userImage = data.fields[PHOTO_URL_FIELD.fieldApiName].value;
        } else if (error) {
            this.handleError(error);
        }
    }

I am updating the User Image through Apex (I am building a community page and there are a few additional requirements that the built in User Image component doesn't have)

save() {
    if (this.newImage && this.uploadType === "Account") {
        this.showSpinner = true;
        // "Create" new Account Image
        this.updateContentVersion(
            {
                Id: this.newImage.ContentVersionId,
                [ACCOUNT_FILE_TYPE_FIELD.fieldApiName]: "Account Image"
            },
            true
        );

        if (this.existingImage)
            this.updateContentVersion(
                {
                    Id: this.existingImage.ContentVersionId,
                    [IS_DELETED_FIELD.fieldApiName]: true
                },
                false
            );

        return;
    }

    if (this.newImage && this.uploadType === "User") {
        uploadUserImage({
            fileRecordId: this.newImage.ContentDocumentId
        })
            .then(() => {
                this.showSpinner = false;
                this.newImage = undefined;
                this.showModal = false;
                this.saveDisabled = true;
                refreshApex(this._getRecordResponse);
            })
            .catch(error => {
                this.handleError(error);
                this.saveDisabled = true;
            });
    }
}

Once I manually refresh the page, the data updated in "uploadUserImage" renders without issue. I just need to of course programmatically refresh the getRecord wire

Any ideas?

Answer 1

I believe i've stumbled upon the issue. I am using the UserProfile connect API class, specifically the SetPhoto method (documentation HERE) and it says "Photos are processed asynchronously and may not be visible right away". getRecord must not see a record change when it runs, as PHOTO_URL_FIELD hasn't changed yet and therefore does not "refresh".

I employed a bit of a workaround that i would term a bit janky but for my use case it can be done without issues. I used the setTimeout() method so that it wouldn't run for 3 seconds, giving time for the photo to upload and put the refreshApex in there:

uploadUserImage({
                fileRecordId: this.newImage.ContentDocumentId
            })
                .then(() => {
                    this.showSpinner = false;
                    this.showModal = false;
                    this.saveDisabled = true;
                    setTimeout(() => {
                        refreshApex(this._getRecordResponse);
                    }, 3000);
                })
                .catch(error => {
                    this.handleError(error);
                    this.showSpinner = false;
                    this.saveDisabled = true;
                });

Potential issues is if it take longer than 3 seconds for the photo to upload through the setPhoto method of UserProfile then the getRecord would not run as it does not detect changes in the record (even though we are "manually" refreshing it)