Magento 2: Optymalizacja aplikacji z GraphQL

Jeśli mielibyśmy wyciągnąć jakąś naukę z dziedziny IT z pewnością dotyczyłaby ona tego, że każde rozwiązanie zawsze można usprawnić. Nie zawsze będzie to duża zmiana, ale niemniej Twoje rozwiązanie stanie się bardziej zoptymalizowane. Postęp w IT nie następuje w paru dużych skokach wydajności. Przeważającą normą jest cierpliwy, ale pewny i nieustępujący postęp – to on pcha branżę informatyczną do przodu. Jest to wyjątkowo widoczne przy optymalizacji platform e-Commerce’owych. Do najpopularniejszych z nich należy Magento i po przeczytaniu tego artykułu dowiesz się jak optymalizować zapytania w Magento 2 z użyciem GraphQL.

Jak optymalizować komunikację server-client w Magento 2 z GraphQL-em?

Magento 2 jest platformą e-Commerce wykorzystywaną przez profesjonalistów do budowania i utrzymania sklepów internetowych. Każdy zna powiedzenie „klient nasz pan” i podobnie jest w e-handlu: kluczowym elementem jest satysfakcja klienta, dlatego też właściciele e-Commerce stawiają na maksymalną optymalizację doświadczeń. To właśnie między wygodą korzystania ze strony i klientem wchodzi kwestia technologii GraphQL. Ale na jakie sposoby optymalizuje ona komunikację w Magento 2?

Czym jest GraphQL?

GraphQL jest językiem zapytań dla systemów API udostępnianym na prawach licencji Open Source. Język ten został stworzony przez Facebooka w 2012 roku a obecnie jest wspierany przez GraphQL Foundation. Właściciele Facebooka wraz z innymi organizacjami związanymi z IT powołali tę fundację, aby rozwijać technologie zgodnie z zasadami non-profit. W wyniku tych działań wokół GraphQL-a zaczęła skupiać się coraz większa społeczność developerów. Dzisiaj jest jednym z popularniejszych języków do obsługi zapytań. Zalicza się do niego wiele bibliotek pozwalających na obsługę tego języka, zarówno po stronie serwerowej, jak i po stronie klienta. Dwie z bibliotek GraphQL wchodzą w skład stacku technoloczniego Magento 2 i służą optymalizacji backendu i frontendu. Są to webonyx/graphql-php (server-side) i Apollo Graphql Nano (client-side).

Jak działa GraphQL?

GraphQL używa zapytań query, aby w wydajny i elastyczny sposób pozyskiwać dane, które są pobierane w odpowiedzi na konkretne akcję użytkownika. System wysyła zapytania w protokole HTTP i HTTPS i uzyskuje odpowiedzi na nie w formacie JSON – języku opartym na JavaScript stworzonym pod zadania związane z wymianą danych. Zanim wyślemy zapytanie query musisz się upewnić, że jest ono zgodne ze zdefiniowanym schematem działającym po stronie serwera. Dodatkowo w GraphQL właściwości danych pobieranych z backendu zależą od wysłanego zapytania:

• zapytania query typu POST są wysyłane do części body
• natomiast query typu GET są przesyłane w formie parameter

O tym jak wygląda proces wysyłania zapytań pomiędzy frontendem i backendem pisaliśmy w artykule o obowiązkach backend developera. Jednak, aby lepiej zrozumieć, za co dokładnie odpowiedzialny jest GraphQL, rozpiszemy go pokrótce:

1. Po stronie klienta użytkownik wykonuje czynność, np. klika na produkt, aby zobaczyć jego miniaturkę.
2. Ta czynność generuje zapytanie, które jest przesyłane na stronę serwera.
3. Serwer, wykorzystując język, analizuje to zapytanie i określa jakie dane mają zostać pobrane po stronie klienta w formie odpowiedzi.
4. Dane zostają wysłane na urządzenie klienta i pobrane. Użytkownikowi wyświetla się miniaturka jego produktu.

Brzmi prosto? Może i tak, ale wcale tak nie jest. Bo w końcu nie wystarczy zrobić coś poprawnie, tylko lepiej od konkurencji. A w świecie e-Commerce’u „lepiej” oznacza szybciej i wygodniej dla użytkownika. W jaki sposób GraphQL różni się od konkurencji i co sprawia, że lepiej nadaje się do optymalizacji w Magento?

Optymalizacja Magento 2: GraphQL vs REST API

Obie technologie dzielą między siebie parę podobieństw, kiedy przychodzi do funkcji obsługi zapytań. Tak samo jak GraphQL, tak i REST łączy się w protokole HTTP/S i udziela odpowiedzi w formacie JSON. Oba oprogramowania dzielą także dane pobierane z backendu na zasoby, np. na platformie e-Commerce jak Magento, najcześciej zasobami są produkty, użytkownicy, kategorie, itp. Jednak właśnie zasobów dotyczy pierwsza różnica pomiędzy GraphQL-em i REST-em.

Różnice w obsłudze zapytań o zasoby

REST API każdy pojedynczy zasób przypisuje jednemu endpointowi (mówiąc w prostym języku jest to jeden z końców kanału komunikacyjnego między frontendem i backendem). Oznacza to, że używając tej technologii obsługi zapytań, będziesz musiał wysyłać nasze zapytania na inne endpointy w zależności od ich rodzaju.

Natomiast GraphQL przesyła wszystkie query do jednego wspólnego endpointa. Jakie są tego rezultaty?

Przy korzystaniu z aplikacji na REST-cie nie masz kontroli nad tym, ile danych pobieramy ze zdefiniowanego zasobu. Gdy wysyłasz zapytanie o zasoby na wybrany endpoint, pobierasz wszystkie informacje znajdujące się w danym zasobie. Dzieje się tak, gdyż metody RESTowe mają zdefiniowane interfejsy, co sprawia że odpowiedź przychodząca ze strony serwera musi zawierać wszystkie pola zdefiniowane w wybranym interfejsie.

Z drugiej strony GraphQL oferuje bardziej elastyczne i wydajne rozwiązanie. Operując tym językiem zapytań, możesz sam określić jakie dane zostaną pobrane z backendu. Będziesz w stanie to zrobić dzięki odpowiedniej zmianie w strukturze zapytania – nie potrzeba dodatkowego endpointa przypisanego tylko pod te zasoby. Wystarczy zdefiniować gatunek query (GET lub POST) aby pokazać jakich danych potrzebujesz. Co więcej, możesz poddawać query dalszym konfiguracjom, aby jeszcze lepiej skalować i optymalizować współpracę backendu i frontendu Twojej aplikacji w Magento.

GraphQL zmniejsza liczbę zapytań

Zbyt wysoka liczba zapytań kierowanych do backendu aplikacji nie pomaga w jej optymalizacji. W technologiach opartych na API RESTa musisz wysyłać więcej zapytań, żeby dokładnie określić jakich danych potrzebujesz; jedno zapytanie o same zasoby, a drugie o dane wchodzące w ich skład. Dopiero po tej procedurze, dane zostaną wyrenderowane po stronie klienta.

Z kolei z GraphQL możesz skrócić tę operację na dwa sposoby: zagnieżdżanie i łączenie query. Najpierw wyjaśnimy na czym polega ten pierwszy. Chodzi po prostu o zawarcie obydwu zapytań – o zasób i dane – w jednym query. Takie zagnieżdżone query będzie się składało wtedy z części nadrzędnej i podrzędnej. Część nadrzędna określi do jakiego zasobu jest kierowane zapytanie, a podrzędna jakie dane mają zostać pobrane.

Rozszerzeniem tej metody jest zagnieżdżanie rekursywne, które umożliwia zagnieżdżanie wielu nadrzędnych i podrzędnych query w jednym zapytaniu. Pozwala ona pobierać całe sety danych, skraca czas pracy programistów i zmniejsza szansę popełnienia błędów podczas budowania architektury. Dodatkowo, zagnieżdżanie rekursywne działa na korzyść doświadczenia użytkownika. Oparta na tak przygotowanych query strona po pobraniu zawartości ze strony serwera zapisuje je w pamięci podręcznej. Dzięki temu użytkownik nie musi ponownie czekać na wysłanie zapytań i pobieranie danych z zasobów, a do tego ma dostęp do strony nawet w trybie offline.

Drugą metodą zmniejszania liczby zapytań jest łączenie query. To działanie jest wyjątkowo przydatne jeśli Twoja strona wymaga pobierania informacji o określonych elementach i ustawieniach sklepu przy każdym wejściu na witrynę. Dla przykładu Magento ma zdefiniowane query do tego typu zapotrzebowania. Jednak dzięki GraphQL-owi możesz dalej optymalizować komunikację między klientem a serwerem. Zamiast wysyłania dwóch osobnych zapytań o dane do zacachowania, możesz je zawrzeć w jednym i tym sposobem powiązać ze sobą zapytania o całkowicie niepowiązanych ze sobą zasobach backendowych,  i zacachować je na odpowiednim poziomie witryny. Przyśpieszy to działanie całej strony i ułatwi pracę programistów.

Obsługa zapytań GraphQL w Magento 2

W celu obsługi zapytań GraphQL na platformie Magento 2 została zdefiniowana dla nich całkiem osobna „area”. Umożliwiło to definiowanie odpowiednich reguł DependencyInjection (wstrzykiwaniu zależności) dla tego języka zapytań. Do tych reguł należy konfigurowanie query i schematów, które odbywa się w pliku schemaGraphQL. Jeśli zaś chodzi o samą logikę, dane będziesz przygotowywać poprzez stworzenie odpowiedniej klasy, która zdefiniuje odpowiedni interfejs.

Oprócz specjalnie przypisanej zapytaniom GraphQL-owym strefie, Magento 2 daje również możliwość cachowania zapytań w tym języku. Narzędziem pozwalającym na cachowanie zapytań po stronie Magento 2 jest biblioteka Apollo GraphQL. Warto wiedzieć jak najlepiej skonfigurować ustawienia dotyczące tego, jakie typy query będą cachowanie.

Cachowanie zapytań w Magento 2 za pomocą Apollo GraphQL

Musisz pamiętać, że cachowanie działa tylko przy włączonej opcji fullpageCache. Dodatkowo cachowane są tylko zapytania query typu „GET”, podczas gdy Apollo GQ domyślnie wysyła zapytania typu „POST”. Dlatego też pierwszą zmianą jaką będziesz musiał wprowadzić to zmiana przesyłanych query. Poza tym, Apollo GraphQL dostarcza nam kilka narzędzi i funkcji do optymalizacji obsługi zapytań w Magento 2:

• InMemoryCache
• Zarządzanie cachem – Fetch Policy
• Biblioteka persistCache
• Definiowanie middleware’ów do zapytań GraphQL-a

InMemoryCache

Dzięki temu komponentowi w oknie przeglądarki zapisywane są dane, które zostały już raz pobrane. Sprawia to, że użytkownik wracający na daną stronę nie musi znowu wysyłać zapytań do backendu, dane zostają mu natychmiastowo wyrenderowane. Dzięki temu narzędziu możesz zacachować całe zapytania lub poszczególne obiekty. Ponadto, dla każdego obiektu możesz zdefiniować klucz według którego dany obiekt będzie cachowany.

Zarządzanie cachem z fetchPolicy

Jest to narzędzie do definiowania polityki cachowania dla każdego zapytania query. Masz dostęp do kilku predefiniowanych schematów:

• cache-first – domyślna polityka cachowania dla Apollo. To ustawienie koncentruje się bardziej na szybkim dostarczaniu odpowiedzi na zapytania, niż na pobieraniu najbardziej aktualnych danych.
• cache-and-network – ta polityka kładzie nacisk na balans pomiędzy szybkim czasie odpowiedzi i aktualizowaniem danych w cache’u
• network-only – polityka mająca na celu aktualizacje danych i dostarczanie najaktualniejszych informacji do cache’a kosztem czasu wysyłania odpowiedzi
• cache-only  – polityka, która dostarcza dane z serweru bez aktualizowania ich.
• no-cache – polityka podobna do „network-only”. Jedyną różnicą jest pominięcie aktualizacji danych.

Wszystkie dane dotyczące polityki cachowania są przetrzymywane w pamięci podręcznej: po odświeżeniu lub zamknięciu i otwarciu strony musimy pobrać je ponownie.

Biblioteka persistCache

Biblioteka ta pozwala dynamicznie przenosić zawartość przechowywaną w InMemoryCache do modułu localstorage. Natomiast przy ponownym uruchomieniu strony dane przenosi się z modułu do InMemoryCache jako stan początkowy cache’a.

Definiowanie middleware’ów do zapytań GrahpQl-a

Apollo GraphQL pozwala m.in. zdefiniować middleware’a (oprogramowania pośredniczącego w komunikacji pomiędzy różnymi aplikacjami/systemami), który będzie funkcją odpowiedzialną za autoryzowanie zapytań. Może to Ci pomóc w przypadku, gdy pojawia się problem z załadowaniem Twojej strony. Wtedy zamiast powiadomienia o błędzie ładowania, możesz tak skonfigurować middleware’a, aby wymusił on ponowne załadowanie zapytań po określonym odstępie czasu, podczas gdy użytkownikowi nadal prezentowana będzie strona ładowania.

Musisz pamiętać, że aby uzyskać dostęp do usług oferowanych przez Apollo GraphQL potrzebujemy skonfigurować Magento PWA Studio. Pozwoli to na dalszą optymalizację zapytań GraphQL i komunikację server-client w Magento 2.

Optymalizacja Magento 2: Zalety korzystania z GraphQL

Przy porównaniu obsługi zapytań przez oba języki, możesz zauważyć pewnie korzyści po stronie GraphQL-a.

• Dzięki podzieleniu query na gatunki, zmniejsza się ilość danych, które użytkownik musi pobrać podczas korzystania ze sklepu.
• Mniejsza liczba endpointów i zapytań wysyłanych do backendu odciąża bazę danych.
• Zwiększona kontrola nad rodzajem i ilością pobieranych danych i wysyłanych zapytań.
• Dzięki zagnieżdżaniu i łączeniu query skraca się czas pracy programisty i zostaje przyśpieszona komunikacja między serwerem a klientem witryny.
• Magento umożliwia zdefiniowanie zapytań i schematów według, których działają, co sprawia, że możesz zoptymalizować logikę serwera typowo do Twoich potrzeb.
• Z wykorzystaniem Apollo GraphQL jesteś w stanie ustalić reguły cachowania zapytań, usprawnić przepływ danych i zwiększyć wydajność strony.

Jak widać GraphQL oferuje bardziej elastyczne i wydajne rozwiązania optymalizacji aplikacji na Magento 2. Podobnie jak sama platforma, która przyciąga setki tysięcy biznesów swoimi możliwościami dogłębnej i szczegółowej rozbudowy i personalizacji, tak i język zapytań GraphQL dostarcza szereg ulepszeń i szans na optymizację, które możesz dopasować do Twoich potrzeb biznesowych.