LWC Push RecordId to Apex

Question

Im attempting to get the recordid from my lighting web component into my apex controller for sorting. Writing a component to display related tasks on the lighting page layout.

Would someone mind helping me with this?

Thanks

Apex Controller

public with sharing class dataTableLWC {
    @AuraEnabled(cacheable = true)
public static List<Task> fetchTasks(String taskId){

        return [SELECT Id,Subject,ActivityDate FROM TASK WHERE whatid = :taskId];

    }
}

LWC - JS

import {
    LightningElement,
    wire,
    track,
    api
} from 'lwc';

//import method from the Apex Class
import fetchTasks from '@salesforce/apex/dataTableLWC.fetchTasks';

// Declaring the columns in the datatable
const columns = [{
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    {
        label: 'Subject',
        fieldName: 'Subject'
    },
    {
        label: 'Due Date',
        fieldName: 'ActivityDate'
    }
];

// declare class to expose the component
export default class DataTableComponent extends LightningElement {
    @track columns = columns;
    @track record = {};
    @track rowOffset = 0;
    @track data = {};
    @track bShowModal = false;
    @wire(fetchTasks) parameters;
    @api recordId;

    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true; // display modal window
    }

    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.bShowModal = false;
    }
}

LWC - HTML

       <!-- Detail view modal start -->
     <template if:true={bShowModal}>
      <section role="dialog" tabindex="-1"
               aria-labelledby="modal-heading-01"
               aria-modal="true"
               aria-describedby="modal-content-id-1"
              class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
            <!-- modal header start -->
            <header class="slds-modal__header">
               <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                  <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
               </button>
               <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
            </header>
            <!-- modal body start -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
              <dl class="slds-list_horizontal slds-wrap">
                  <dt class="slds-item_label slds-truncate" title="Subject">Subject:</dt>
                  <dd class="slds-item_detail slds-truncate">{record.Subject}</dd>
                  <dt class="slds-item_label slds-truncate" title="DueDate">Due Date:</dt>
                  <dd class="slds-item_detail slds-truncate">{record.ActivityDate}</dd>
              </dl>
            </div>
            <!-- modal footer start-->
            <footer class="slds-modal__footer">
                 <lightning-button variant="brand"
                 label="Close"
                 title="Close"
                 onclick={closeModal}
                 ></lightning-button>
            </footer>
         </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
   </template>
   <!-- Detail view modal end -->

  </template>

Answer 1

You have a line that says

@wire(fetchTasks) parameters;

You need to do more than that. Have a look at the "Wire an Apex Method with a Dynamic Parameter" example in the LWC docs

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex

In their example they're using a phrase 'searchKey' that the user types in, whereas you're going to be using the recordId that is automatically injected into your @api recordID property as long as you're on a record detail page.

You need to make sure your configuration file enables you to put the component on a record detail lightning app page by adding the lightning__RecordPage target in your configuration file for the component.

<targets>
    <target>lightning__RecordPage</target>
</targets>

Specifically here's their Apex class example

ContactController.cls

public with sharing class ContactController {
        @AuraEnabled(cacheable=true)
        public static List<Contact> findContacts(String searchKey) {
            String key = '%' + searchKey + '%';
            return [SELECT Id, Name, Title, Phone, Email, Picture__c FROM Contact WHERE Name LIKE :key AND Picture__c != null LIMIT 10];
        }
    }

As well as their JS example

apexWireMethodWithParams.js

import { LightningElement, track, wire } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';

/** The delay used when debouncing event handlers before invoking Apex. */
const DELAY = 300;

export default class ApexWireMethodWithParams extends LightningElement {
    @track searchKey = '';

    @wire(findContacts, { searchKey: '$searchKey' })
    contacts;

    handleKeyChange(event) {
        // Debouncing this method: Do not update the reactive property as long as this function is
        // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        this.delayTimeout = setTimeout(() => {
            this.searchKey = searchKey;
        }, DELAY);
    }
}

And here is their HTML template

apexWireMethodWithParams.html

<template>
    <lightning-card title="ApexWireMethodWithParams" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search" value={searchKey}></lightning-input>
            <template if:true={contacts.data}>
                <template for:each={contacts.data} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={contacts.error}>
                <c-error-panel errors={contacts.error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>