Wire service is not fetching the data from Apex class

Question

I am trying to use wire service to fetch my data but it is not returning anything I am also trying to console log but it is of no use can somebody please help me where I am wrong.

This HTML

<template>
    <lightning-card title="Product Search">
        <div class="slds-m-around_medium">
            <lightning-input name="enter-search" label="Search" type="search" onchange={handleSearch}></lightning-input><br/>
            <lightning-input name="NABTick" label="NAB Price List" type="checkbox" onchange={handleCheckbox} ></lightning-input><br/>
        <lightning-button label="Search" name="search" title="Search Products" onclick={findProductKey} variant="brand" ></lightning-button>&nbsp;&nbsp;&nbsp;
            <lightning-button label="Cancel" name="cancel" title="Cancel" onclick={handleCancle} ></lightning-button>

        </div>
        <div>
            This is the search key value ={searchKey}
            This is NAB Check list Value={NABcheckbox}
        </div>

        <template if:true={products}>
            <div>
                <template for:each={products} for:item=product>
                    This is the prodcut Id :{product.Id}
                  <c-product-search-result-wired key={product.Id} product={product}></c-product-search-result-wired>
                </template>
            </div>
        </template>
    </lightning-card>

</template>

This is Js file

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

const DELAY = 300;
export default class ProductSearchWired extends LightningElement {
    @track searchKey;
    @track NABcheckbox= false;
    @track products;

    @wire(getProducts,{productSearchKey:'$searchKey'})
    products({data,error}){
        if(data){
            this.products = data;
            this.error = undefined;
        }else if (error) {
            this.error = error;
            this.products = undefined;
        }
    }

    handleSearch(event){
        this.searchKey= event.target.value;
        console.log(this.searchKey);
    }

    handleCheckbox(){
        this.NABcheckbox = true;
    }
}

This is the apex class

public with sharing class productSearch {

    @AuraEnabled(cacheable=true)

    public static List<Product2> getProducts(String productSeachKey)
    {
          if( String.isNotEmpty(productSeachKey))
        {
            return [SELECT Id,Name,ProductCode,Eng_Status__c,Quotable__c,USD_Price__c FROM Product2 WHERE IsActive= true AND Eng_Status__c IN ('Production','Procurement','Prototype','Hold')
                    AND Field_Replaceable_Part__c = false AND Base_Price_List_Item__c != null AND (Name LIKE : '%'+productSeachKey+'%' OR ProductCode LIKE: '%'+productSeachKey+'%')
                    ORDER BY SBQQ__SortOrder__c ASC NULLS LAST];
        } else 
        { 
          return null;
        }

    }

}

Answer 1

Use below syntax -

getProducts({
        productSearchKey : searchKey
    })
    .then(result => {

    })
    .catch(error => {
        console.log(error);
    });

Answer 2

you can do it without an imperative call back. What you have to do for your code to work is

searchKey=' ';-this need not be trackable and should not be undefined.

@wire(getProducts,{productSearchKey:'$searchKey'})
    productsResult({data,error}){
        if(data){
            this.products = data;
            this.error = undefined;
        }else if (error) {
            this.error = error;
            this.products = undefined;
        }
    }