[Salesforce]Lightning Web ComponentからApex呼び出し方法

Lightning Web ComponentでApex呼び出し方法

■LWCから呼び出せるApexメソッド

条件

　　@AuraEnabledがついていること

　　staticであること

　　publicもしくはglobalであること

例）

Apexクラス作成します。

testController

public with sharing class testController {
    @AuraEnabled
    public static List<test__c> getRecord( String str ){
        return [
                SELECT
                 Id,
                 Name
                FROM test__c
                Where Name = str
            ];
    }
}

■LWCからApex呼び出し

・Javascript

testLwc.js

import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { CurrentPageReference } from "lightning/navigation";
import getRecord from '@salesforce/apex/testController.getRecord';

export default class testLwc extends LightningElement {

　@api recordId;

  @wire(CurrentPageReference)
  async getStateParameters(currentPageReference) {
    //ScreenActionの場合、レコード詳細画面でLightning Web コンポーネントアクション押下時のレコードID取得
    this.recordId = currentPageReference.state.recordId;
    //Apexクラスメソッド呼び出して、レコード取得
    const rows = await getRecords({ recordId: this.recordId }).catch((e) => {
      console.error(e);
　　　//dispatchEventメソッドでカスタムイベントをディスパッチし、親コンポーネントに伝達します。
      this.dispatchEvent(
        new ShowToastEvent({
          title: "エラーが発生しました。",
          message: e.body.message,
          variant: "error",
        })
      );
    });
  }

}

・xml

testLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
  <targets>
  <target>lightning__RecordAction</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__RecordAction">
      <actionType>ScreenAction</actionType>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

・html

testLwc.html

<template>
        <lightning-quick-action-panel header="test">
            ここにモーダルコンテンツを記載する
            <div slot="footer">
                <lightning-button variant="neutral" label="ボタン1" class="slds-m-left_x-small"></lightning-button>
                <lightning-button variant="brand" label="ボタン2" class="slds-m-left_x-small"></lightning-button>
            </div>
        </lightning-quick-action-panel>
</template>