Hyperlinks are not showing up + error message - LWC Datatable with picklist

Question

The hyperlinks are missing when the picklist is added. When I added:

const { data, error } = result;     

The hyperlinks are showing, but the picklist doesn't work. Without that the picklist is working but hyperlinks are missing.

Is there any workaround, how can I get the hyperlinks and the working picklist?

Error message: LWC component's @wire target property or method threw an error during value provisioning. Original error: [data is not defined]]

    import { LightningElement, track, wire, api } from 'lwc';
    import fetchWolis from '@salesforce/apex/AccountDataController.fetchWolis';
    import WORK_ORDER_LINE_ITEM_OBJECT from '@salesforce/schema/WorkOrderLineItem';
    import STATUS_FIELD from '@salesforce/schema/WorkOrderLineItem.Status';
    import { updateRecord } from 'lightning/uiRecordApi';
    import { ShowToastEvent } from 'lightning/platformShowToastEvent';
    import { refreshApex } from '@salesforce/apex';
    import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
     
    const columns = [
        {
            label: 'Device',
            fieldName: 'assetUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'Device_Name__c' }, 
            target: '_blank'},
            sortable: true
        },
        { label: 'Serial Number', fieldName: 'Serial_No__c', editable: false },
        {
            label: 'Status', fieldName: 'Status', type: 'picklistColumn', editable: false, typeAttributes: {
                placeholder: 'Choose Status', options: { fieldName: 'pickListOptions' }, 
                value: { fieldName: 'Status' }, // default value for picklist,
                context: { fieldName: 'Id' } // binding account Id with context variable to be returned back
            }
        },
        { label: 'Product', fieldName: 'PricebookEntryId', editable: false },
        {
            label: 'Line Item Number',
            fieldName: 'nameUrl',
            type: 'url',
            typeAttributes: {label: { fieldName: 'LineItemNumber' }, 
            target: '_blank'},
            sortable: true
        }, 
    ]
     
    export default class CustomDatatableDemo extends LightningElement {
        columns = columns;          //picklist
        showSpinner = false;
        @track data = [];
        @track accountData;
        @track draftValues = [];
        lastSavedData = [];
        @track pickListOptions;
     
    
        @api recordId;             //related record
    
        @track error;              //hyperlinks
        @track links;
    
    
    
        @wire(getObjectInfo, { objectApiName: WORK_ORDER_LINE_ITEM_OBJECT })
        objectInfo;
     
        //fetch picklist options
        @wire(getPicklistValues, {
            recordTypeId: '0120X000000gLE8QAM',
            fieldApiName: STATUS_FIELD
        })
     
        wirePickList({ error, data }) {
            if (data) {
                this.pickListOptions = data.values;
            } else if (error) {
                console.log(error);
            }
        }
     
        //here I pass picklist option so that this wire method call after above method
        @wire(fetchWolis, { woid: '$recordId' }, { pickList: '$pickListOptions' })
        accountData(result) {
            this.accountData = result;
            if (result.data) {
                this.data = JSON.parse(JSON.stringify(result.data));
     
                this.data.forEach(ele => {
                    ele.pickListOptions = this.pickListOptions;
                })
     
                this.lastSavedData = JSON.parse(JSON.stringify(this.data));

            let nameUrl, assetUrl, prodUrl;
            this.wolis = data.map(row => { 
                nameUrl = `/${row.Id}`;
                assetUrl = `/${row.AssetId}`;
                prodUrl = `/${row.PricebookEntryId}`;
                return {...row , nameUrl , assetUrl , prodUrl} 
            })
            this.error = null;
     
            } else if (result.error) {
                this.data = undefined;
            }
        };

Answer 1

You can't have the same property in the same class more than once. This includes class properties and function names.

@track accountData;

...

accountData(result) {
    this.accountData = result;

I'm not entirely sure why you got the error you did, but the problem has to do with these properties clashing.

Answer 2

working code:

@wire(fetchWolis, { woid: '$recordId' }, { pickList: '$pickListOptions' })
accountData(result) {
    this.accountData = result;
    let baseUrl = 'https://'+'location.host'+'/';
    if (result.data) {
        this.data = JSON.parse(JSON.stringify(result.data));

        this.data.forEach(ele => {
            ele.pickListOptions = this.pickListOptions;
            ele.nameUrl = baseUrl+ele.Id;
        })

        this.lastSavedData = JSON.parse(JSON.stringify(this.data));

    } else if (result.error) {
        this.data = undefined;
    }
};