Отображение индикатора загрузки при вызове Apex в Salesforce LWC - PullRequest
Новая
       129

Отображение индикатора загрузки при вызове Apex в Salesforce LWC

1 голос
/ 21 апреля 2020

Какой лучший способ показать индикатор загрузки при получении данных из Apex в веб-компоненте Lightning?

У меня есть такой подход: 

import { LightningElement, api } from "lwc";
import shouldShowCard from "@salesforce/apex/ApexClass.shouldShowCard";

/**
 * Card component that is conditionally shown based on Apex.
 */
export default class ConditionalCard extends LightningElement {
    @api recordId;

    @api isDone = false;

    @api shouldShow = false;

    connectedCallback() {
        shouldShowCard({ id: this.recordId })
            .then(result => {
                this.shouldShow = result;
            })
            .finally(() => {
                this.isDone = true;
            });
    }
}

И это HTML

<template>
  <template if:false={isDone}>
    <div>Loading...</div>
  </template>
  <template if:true={shouldShow>
    <div>Card</div>
  </template>
</template>

Теперь, это работает, но я использую правила LW C ESLint, и когда я делаю это, я получаю сообщение об ошибке / предупреждение "no-api-reassignment", потому что я назначаю свойства API в моем связанном обратном вызове. https://github.com/salesforce/eslint-plugin-lwc/blob/master/docs/rules/no-api-reassignments.md

Это кажется разумным, хотя и очень похоже на шаблон, который показывает Salesforce Lightning Spinner. https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner/documentation

Так что я просто ищу совет о том, как лучше всего справиться с этим, или мне следует просто отключить правило ESLint. Другие вещи, которые нужно рассмотреть, это как протестировать этот материал, реактивность с помощью API-декоратора облегчила мою задачу, но я не хочу продолжать, если я не использую лучший подход.

1 Ответ

1 голос
/ 21 апреля 2020

Вам не нужно @api, если эти параметры являются внутренним состоянием, если вы не планируете устанавливать их из родительского компонента или предоставлять их системному администратору, чтобы он мог, например, настроить компонент в Lightning App Builder. У вас должно быть все в порядке с @track - или вообще без комментариев. Для простых переменных вам не нужно @track начиная с Spring'20 ( заметки о выпуске ); он может вам все еще понадобиться, если ваша переменная - массив или объект.

Это должно заставить ESLint замолчать.

Я делаю это немного по-другому, личные предпочтения возвращаются из Visualforce status и rendered days Я думаю. 

<template>
    <template if:true={loaded}>
        <p>Content goes here</p>
    </template>
    <template if:false={loaded}>
        <lightning-spinner variant="brand" alternative-text="Loading"></lightning-spinner>
    </template>
</template>


import { LightningElement, api, wire, track } from 'lwc';
import someMethod from '@salesforce/apex/SomeClass.someMethod';

export default class StackExample extends LightningElement {
    @api recordId;
    @track data;
    loaded = false;

    @wire(someMethod, { i: '$recordId' }) wiredResponse({ error, data }) {
        if (data) {
            this.data = data;
            // some post-processing here
        } else if (error) {
            // show toast?
        }
        if(data || error){
            this.loaded = true;
        }
    }
}

Помните, что некоторые теги, такие как <lightning-datatable>, имеют внутренний счетчик. Поиск документации для isLoading. Так что вам может даже не понадобиться if s в html.

...