[Cannot add property recordDetailUrl, object is not extensible]

Question

Trying to use url in lightning-datatable but getting this error: [Cannot add property recordDetailUrl, object is not extensible]

JS:

{
    label: ' Name',
    fieldName: 'recordDetailUrl',
    initialWidth: 200,
    type: 'url',
    typeAttributes: { label: { fieldName: 'name' } },
    sortable: true
},

async connectedCallback(){
    const act = await getAllData();

    for (const acti of act) {
        acti.recordDetailUrl = await this.getRecordUrl(acti.id);
    }
    this.List = act;
}
async getRecordUrl(recordId) {
    const recordReference = {
        type: 'standard__recordPage',
        attributes: {
            recordId,
            objectApiName: XXXXXXXX.objectApiName,
            actionName: 'view'
        }
    };

    const url = await this[NavigationMixin.GenerateUrl](recordReference);
    return url;
}

Answer 1

Anything you get from an Apex call or wire method is marked as "read-only" in order to not corrupt the cache. To actually modify something, you need to make a copy of it first:

const act = [...(await getAllData())].map(acti => ({...acti})); // spread object copy
for(const acti of act) {
  acti.recordDetailUrl = await this.getRecordUrl(acti.id);
}

Note we're also making a copy of the original array (via Array.prototype.map).