Passing an Parameter to Apex from LWC

Question

friends.

I am hoping somewhen can give me some help with this. I am trying to create Lighting Data Table on the Campaign record page. The table will display campaign members that are related to the campaign and fit certain criteria that is defined in the Apex controller. But I am struggling with how I pass the ID of the current campaign into the method. The code I currently have throws an error when the page is loaded.

Any advice on how to pass the current Campaign Id into the Apex SOQL query would be most appreciated.

The JS code

  import { LightningElement, track, wire, api } from 'lwc';
import getRecords from '@salesforce/apex/NewToLiftController.getRecords';
import { getRecord } from 'lightning/uiRecordApi';

const columns = [
    { label: 'Name', fieldName: 'name' },
    { label: 'Email', fieldName: 'Email', type: 'Email' },
    { label: 'Role', fieldName: 'Role__c', type: 'Text' },
    { label: 'Startup Leadership', fieldName: 'Startup_Leadership__c', type: 'boolean' },
    { label: 'Company', fieldName: 'CompanyOrAccount', type: 'Text' },
];

export default class DatatableBasic extends LightningElement {
@api recordId;
@track data = [];
@track columns = columns;
@track tableLoadingState = true;
@wire(getRecords, {recordId: '$recordId'}) campaignMembers;          
}

The Apex

public with sharing class NewTOLiftController {
    @AuraEnabled(Cacheable = true)
    public static List<CampaignMember> getRecords(String recordId) {
        String param = '%' + recordId + '%';
        List<CampaignMember> campaignMembers = [SELECT Name, Email, Role__c, Startup_Leadership__c, CompanyOrAccount
        FROM CampaignMember
        WHERE NewToLift__c = TRUE
        AND CampaignId =: param];
        return campaignMembers;
    }
}

The metadata

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="newToLift">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

HTML

<template>
    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            First Time Campaign Members
        </h2>

        <!-- Simple -->
        <div class="slds-p-around_medium lgc-bg" style="height: 300px;">
            <lightning-datatable
                    key-field="id"
                    data={data}
                    columns={columns}
                    is-loading={tableLoadingState}>
            </lightning-datatable>
        </div>
    </div>
</template>

Answer 1

You have to make a callback function instead of binding it to a property for your @wire call where you set the value of tableLoadingState as false and that will stop the spinning wheel of death.

@wire(getRecords , { recordId: '$recordId' })
    wiredRecordsMethod({ error, data }) {
        if (data) {
            this.data  = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data  = undefined;
        }
        this.tableLoadingState  = false;
    }