Record creation not working on a custom object

Question

I am developing an experience cloud website where the experience user can create a record for a custom object. The code is super simple but it doesn't work. I dont see any error even when I have the error blocks specified. This code is invoked on a button click. The last console statement I see printed is this console.log('Sending vendor quote to Apex:', JSON.stringify(newVendorQuote, null, 2));, after this I dont see anything printed on the Developer Console debug logs. Also I can confirm that the values for the newVendorQuote array is being populated correctly.

My initial setup was to do the record creation using the createRecord method of the lightning/uiRecordApi, that didn't work for some reason and thats why I went the below route.

JS

let newVendorQuote = [
                {
                    'Work_Order_ID__c': this.workOrderId,
                    'Vendor_Name__c': this.vendorId,
                    'Vendor_Phone__c': this.vendorPhone,
                    'Vendor_Email__c': this.vendorEmail,
                    'Quote_Date__c': new Date(),
                    'Status__c': 'Pending',
                }
            ];
            console.log('Sending vendor quote to Apex:', JSON.stringify(newVendorQuote, null, 2));
            // Call the Apex method
            createVendorQuote({ vendorQuote: newVendorQuote })
                .then(result => {
                    if (result === 'success') {
                        console.log('Vendor quote created successfully');
                    } else {
                        console.error('Error creating vendor quote');
                    }
                })
                .catch(error => {
                    console.error('Error calling Apex method:', error);
                });

Apex

@AuraEnabled
public static String createVendorQuote(Vendor_Quote__c vendorQuote) {
    // Use Database.insert with allOrNone set to true
    try {
        System.debug('Received vendor quote: ' + vendorQuote);
        Database.insert(vendorQuote, true);
        return 'success';
    } catch (DmlException e) {
        System.debug('Error inserting vendor quote: ' + e.getMessage());
        return 'error';
    }
} 

Please advise!

Answer 1

The square bracket notation (let newVendorQuote = [];) means that you're going to create an array, but the input of the apex method is a single object that's the issue.
Since you're going to create just one record you don't need a list in apex (and most likely nor in js) so just removing those square brackets will fix it:

let newVendorQuote = {
    'Work_Order_ID__c': this.workOrderId,
    'Vendor_Name__c': this.vendorId,
    'Vendor_Phone__c': this.vendorPhone,
    'Vendor_Email__c': this.vendorEmail,
    'Quote_Date__c': new Date(),
    'Status__c': 'Pending',
};
console.log('Sending vendor quote to Apex:', JSON.stringify(newVendorQuote, null, 2));
// Call the Apex method
createVendorQuote({ vendorQuote: newVendorQuote })
    .then(result => {
        if (result === 'success') {
            console.log('Vendor quote created successfully');
        } else {
            console.error('Error creating vendor quote');
        }
    })
    .catch(error => {
        console.error('Error calling Apex method:', error);
    });