Apex Demo

This page demonstrates the sfdc-apex-provider LWR plugin, which enables Salesforce @salesforce/apex/* imports to work in the LWR development environment.

Features

• @wire support: Reactive data binding with automatic refresh
• Imperative calls: Traditional .then() and async/await patterns
• Mock data: Configure mock responses for development
• Apex parsing: Automatically discovers @AuraEnabled methods from your Apex classes

Live Demo

Usage

1. Configure the plugin in lwr.config.json

{
  "moduleProviders": [
    [
      "$rootDir/plugins/sfdc-apex-provider/index.js",
      {
        "apexDir": "$rootDir/force-app/main/classes",
        "mockDataDir": "$rootDir/mock-data",
        "mockDelay": 100
      }
    ]
  ]
}

2. Create mock data (optional)

Create JSON files in your mockDataDir:

{
  "AccountController.getAccounts": [
    { "Id": "001...", "Name": "Acme Corp", "Industry": "Technology" }
  ],
  "AccountController.searchAccounts": [
    { "Id": "001...", "Name": "Acme Corp" }
  ]
}

3. Import and use in your LWC

import { LightningElement, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import searchAccounts from '@salesforce/apex/AccountController.searchAccounts';

export default class MyComponent extends LightningElement {
    @track accounts = null;

    // Load data on component mount
    connectedCallback() {
        getAccounts()
            .then(result => {
                this.accounts = result;
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

    // Imperative call
    handleSearch() {
        searchAccounts({ searchTerm: 'Acme' })
            .then(result => {
                console.log('Results:', result);
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
}

Source Code

Apex Controller

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, Industry FROM Account LIMIT 10];
    }
    
    @AuraEnabled(cacheable=true)
    public static List<Account> searchAccounts(String searchTerm) {
        String pattern = '%' + searchTerm + '%';
        return [SELECT Id, Name FROM Account WHERE Name LIKE :pattern];
    }
    
    @AuraEnabled
    public static Account createAccount(String accountName) {
        Account acc = new Account(Name = accountName);
        insert acc;
        return acc;
    }
}

LWC Component

import { LightningElement, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import searchAccounts from '@salesforce/apex/AccountController.searchAccounts';
import createAccount from '@salesforce/apex/AccountController.createAccount';

export default class ApexDemo extends LightningElement {
    @track accounts = null;
    @track filterValue = '';
    @track searchResults = null;

    connectedCallback() {
        // Load accounts on mount
        getAccounts()
            .then(result => { this.accounts = result; })
            .catch(error => { console.error(error); });
    }

    handleSearch() {
        searchAccounts({ searchTerm: this.filterValue })
            .then(result => {
                this.searchResults = result;
            })
            .catch(error => {
                console.error(error);
            });
    }

    async handleCreate() {
        const result = await createAccount({ accountName: 'New Account' });
        console.log('Created:', result);
    }
}