0

I'm trying to fetch Contacts to datatable.

Here is Apex class:


    @AuraEnabled(Cacheable = true)
    public static List<Contact> getPaginatedContacts(Integer pageNumber, Integer pageSize){
        return [SELECT Id, Name FROM Contact LIMIT :pageSize OFFSET :pageNumber];
    }

    @AuraEnabled(Cacheable = true )
    public static Integer getContactsCount() {
        return [SELECT COUNT() FROM Contact];
    }

}

LWC component

    <lightning-card title="Available Contacts" icon-name="standart:contact_list">
        <div>Hello</div>
        <div class="slds-m-around_medium">
            <template if:true={contacts}>
                <lightning-datatable
                        key-field="Id"
                        data={contacts}
                        columns={columns}>
                </lightning-datatable>
            </template>
            <br/>
            <!--<c-paginator
                    onfirstpage={firstPageHandler}
                    onlastpage={lastPageHandler}>
            </c-paginator>-->
        </div>
    </lightning-card>
</template>

JS file of the component:

import getPaginatedContacts from '@salesforce/apex/ContactsPagableController.getPaginatedContacts';
import getContactsCount from '@salesforce/apex/ContactsPagableController.getContactsCount';

export default class ContactsTable extends LightningElement {

    @track columns = [
        {
            label: 'Id',
            fieldName: 'Id'
        },
        {
            label: 'Name',
            fieldName: 'Name'
        }
    ];

    @track pageNumber = 0;
    @track pageSize = 5;
    @track contactsCount;
    @track contacts;

    @wire(getPaginatedContacts,
        {
            pageNumber: '$pageNumber',
            pageSize: '$pageSize'
        })
    wiredContacts({
                      error,
                      data
                  }) {
        if (data) {
            console.log(data);
            this.contacts = data;
            console.log(this.contacts);

        } else if (error) {
            console.log(error);
        }
    }
}

I've stuck at this moment. console.log(data); shows array of contacts with necessary fields, but console.log(this.contacts); shows Proxy {}[[Handler]]: tr[[Target]]: Array(0)[[IsRevoked]]: false

When I try to open the page it shows: "Error during LWC component connect phase: [Unknown token: 'undefined'. Are you missing a tokens file or declaration?]"

1
  • console.log(this.contacts) showing a proxy is expected. Lightning locker wraps your data in proxy objects. You can still use them as is in the js. You should also be able to see the data nested somewhere in the proxy object (handler -> originalTarget). Correct the icon name as per @maniac coders answer and you should be good – Nagen Sahu Oct 10 '20 at 6:15
2

You have made a spelling mistake in LWC component in the icon-name

<lightning-card title="Available Contacts" icon-name="standart:contact_list">

Please change 'standart' to 'standard' and the code should work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.