Salesforce Lightning Web Components – łańcuch @wire

@wire

Czym jest i jak działa serwis wire, wie każdy programista, który używa LWC. W dużym skrócie i uproszczeniu: wire umożliwia połączenie warstwy front endowej z backendem.

Przykładowe zastosowania:

• Pobieranie danych rekordów – standardowa funkcja getRecord
• Pobieranie metadanych – adapter getObjectInfo
• Operacje na obiektach – createRecord, updateRecord, deleteRecord
• Pobieranie danych z funkcji backendowych – dowolna metoda w klasie apexowej z adnotacją: @AuraEnabled(cachable=true)

Po pełny opis wire oraz możliwych zastosowań odsyłam do oficjalnej dokumentacji na stronie: https://developer.salesforce.com/

Reaktywność serwisu wire

Teraz skupimy się na jednym aspekcie serwisu wire. Dzięki wsparciu reaktywnych zmiennych sam serwis również staje się reaktywny.

Przykład:

Dodając do parametru recordId “$”, uczyniliśmy go reaktywnym. Teraz każda zmiana wartości zmiennej recordId spowoduje wywołanie funkcji getRecord.

Łańcuch wire

Reaktywność serwisu wire daje nam różne możliwości sterowania nim. Po pierwsze, możemy manipulować wartościami parametrów. Druga opcja, o której nie wspomina oficjalna dokumentacja, to sterowanie momentem wywołania serwisu wire. W poprzednim przykładzie parametrem reaktywnym był recordId, czyli standardowa zmienna ustawiana przez framework podczas inicjalizacji komponentu. Musimy pamiętać, że nic nie stoi na przeszkodzie, żeby uczynić reaktywną dowolną zmienną. Ta wiedza, w połączeniu z Lightning Data Service oraz User Interface API, otwiera nowe możliwości.

Rozpatrzmy następujący scenariusz:

Implementacja komponentu do tworzenia rekordów Account. Jednym z wyświetlonych elementów ma być pole Rating typu Picklist. Na podstawie wartości tego pola mają zostać wyświetlone dane statystyczne z systemu.

• Pobranie domyślnego recordTypeId dla obiektu Account.

Adapter getObjectInfo umożliwia pobranie domyślnego recordTypeId dla obiektu.

• Na podstawie accountRecordTypeId pobieramy dostępne wartości dla pola Rating.

Do pobrania wartości dla pola Rating używamy adaptera getPicklistValues. Parametr recordTypeId adaptera ustawiamy według zmiennej accountRecordTypeId. Dzięki zastosowaniu “$” zmienna staje się reaktywna, co powoduje wywołanie adaptera w momencie zmiany wartości, czyli wewnątrz funkcji getAccountInfo:

• Pobranie danych statystycznych na podstawie wartości pola Rating.

Statystyki zostają pobrane zaimportowaną metodą getRatingStatistics (metoda zaimplementowana w klasie apexowej z adnotacją @AuraEnabled(cachable=true)). Po raz kolejny wartość parametru przekazujemy z użyciem “$”. Dzięki temu zmiana wartości ratingValue w funkcji getRatingPicklist spowoduje wywołanie funkcji getStatistics i tym samym pobranie statystyk.

Rozbudowując interfejs użytkownika o możliwość wyboru recordType dla Account, mamy automatycznie zapewnione pobieranie wartości dla pola Rating oraz nowych statystyk. Analogiczna sytuacja będzie w momencie zmiany wartości pola Rating przez użytkownika: statystyki zostaną pobrane automatycznie.

Łańcuchowe wywołanie serwisu wire otwiera nowe możliwości przed programistami specjalizującymi się w Lightning Web Components. Coraz ważniejsza staje się wiedza o samym frameworku. Coraz więcej operacji można wykonać, wykorzystując tylko opcje dostępne na front-endzie, tym samym przenosząc ciężar operacji (oraz wiedzy) z warstwy apexowej na javascriptową. Obserwując rozwój LWC łatwo dostrzec taki właśnie kierunek Salesforce. Przykładem są uiListApi oraz uiAppsApi, które są już w wersji beta (wkrótce będą dostępne jako preview).

Możliwości wykorzystania serwisu wire oraz dostępnych adapterów jest sporo, ale to już temat na inną publikację.