LWC, set record to database soql from JavaScript with wire and Apex, error

Question

I try to write something to the database soql in JS, but it not works. When I click to the button 'Add to Cart' then is called handlePlaceOrder(). Here is called Apex method placeOrder('hello') with parameter String. And then it crashed "an internal server error". When I executed only Apex method placeOrder('Order01') in Developer Console, it works, writes nameOfOrder to the database.

Here are codes:

html (OK):

<template>
  <div class="shopping-cart">
    <template if:true={messageFromMain}>
      <div class="container">
        <h1>Items in Cart</h1>
        <lightning-card title="Shopping cart">
          <lightning-button 
            class="slds-m-left_x-small"  
            label="Place order" 
            title="Place order"
            variant="success"
            onclick={handlePlaceOrder}>
          </lightning-button>
        </lightning-card>
      </div>
    </template>
    <template if:false={messageFromMain}>
      <h1>Select the shoes</h1>
    </template>
  </div>
</template>

JS (bug):

import { LightningElement, api, wire } from 'lwc';
import placeOrder from '@salesforce/apex/ProductMaster.placeOrder';

export default class ShoppingCart extends LightningElement {
  nameOfOrder;

  @api messageFromMain;

  @wire(placeOrder, { nameOfOrder: '$nameOfOrder'})


  // handle click to button Place order
  handlePlaceOrder() {
    console.log('It was pressed button \'Add to Cart\'.');

    placeOrder('hello');
  }
}

Apex (OK):

@AuraEnabled(cacheable=true)
public static void placeOrder(String nameOfOrder) {
  Shop_Order__c newOrder = new Shop_Order__c(
    Text__c = nameOfOrder
  );
  insert newOrder;
}

Error:

Error: An internal server error has occurred
Error ID: 185265246-97831 (-1502885840)
    at U.B.mk (https://static.lightning.force.com/eu40/auraFW/javascript/Q8onN6EmJyGRC51_NSPc2A/aura_prod.js:656:438)

What is not correct on this JavaScript code? Here is an example with similar problem.

Answer 1

@wire(placeOrder, { nameOfOrder: '$nameOfOrder'})

You might have to delete that line. Your handlePlaceOrder() is treated as continuation of that line (ignore newlines), as a handler what to do (callback) when the asynchonous processing finishes. In the answeryou linked compare what you wrote with "fetchedContact"

And in handlePlaceOrder I think you need to pass params as JSON object where names match the names of apex parameters. Try

Apex

@AuraEnabled
public static Id insertAccount(String n){
    Account a = new Account(Name = n);
    insert a;
    return a.Id;
}

Component's relevant html

<lightning-button label="test" onclick={handlePlaceOrder}>
</lightning-button>

Component's relevant JS

import insertAccount from '@salesforce/apex/SomeClass.insertAccount';
export default class SomeComp extends LightningElement {
handlePlaceOrder() {
        console.log('It was pressed button \'Add to Cart\'.');
        insertAccount({ n: 'hello' })
            .then(result => {
                console.log(result);
            })
            .catch(error => {
                debugger;
            });
    }

}

Browser's console

And it saved the name OK