How to invoke Apex Controller from Lightning Web Component?

Apex Class:

1. public with sharing class AccountController {  
2.   
3.     @AuraEnabled( cacheable = true )  
4.     public static List< Account > fetchAccounts( String searchKey ) {  
5.       
6.         String strKey = '%' + searchKey + '%';  
7.         return [ SELECT Id, Name, Industry FROM Account WHERE Name LIKE: strKey LIMIT 10 ];  
8.           
9.     }  
10.       
11. }  

Lightning Web Component HTML:

1. <template>  
2.       
3.         <lightning-card title = "Search Accounts" icon-name = "custom:custom63">  
4.       
5.             <div class = "slds-m-around_medium">  
6.       
7.                 <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" >  
8.                 </lightning-input>  
9.       
10.                 <template if:true = {accounts}>  
11.       
12.                     <template for:each = {accounts} for:item = "account">  
13.       
14.                         <p key = {account.Id}>{account.Name}</p>  
15.       
16.                     </template>  
17.           
18.                 </template>  
19.           
20.                 <template if:true = {error}>  
21.       
22.                     {error}>  
23.                       
24.                 </template>  
25.       
26.             </div>  
27.       
28.         </lightning-card>  
29.       
30. </template>  

Lightning Web Component JavaScript:

1. import { LightningElement, track } from 'lwc';  
2. import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';  
3.   
4. export default class sample extends LightningElement {  
5.   
6.     @track accounts;  
7.     @track error;  
8.   
9.     handleKeyChange( event ) {  
10.           
11.         const searchKey = event.target.value;  
12.   
13.         if ( searchKey ) {  
14.   
15.             fetchAccounts( { searchKey } )    
16.             .then(result => {  
17.   
18.                 this.accounts = result;  
19.   
20.             })  
21.             .catch(error => {  
22.   
23.                 this.error = error;  
24.   
25.             });  
26.   
27.         } else  
28.         this.accounts = undefined;  
29.   
30.     }  
31.   
32. }  

Lightning Component:

1. <aura:component implements="force:appHostable">  
2.   
3.     <article class="slds-card">  
4.   
5.         <c:sample/>  
6.            
7.     </article>  
8.   
9. </aura:component>   

Output:

Create a Lightning component tab to view the output.