Ta strona używa cookies
sprawdź politykę prywatności

Rozumiem

React Apollo i GraphQL Hooks czyli różne podejścia do GraphQL

12/8/2019
Bartek Cis

W tym artykule opiszę dwie różne techniki na użycie GraphQL w Twojej aplikacji zbudowanej w React’cie.

Czego się dzisiaj dowiesz?

Jest to kontynuacja mojej serii o GraphQL w połączeniu z NodeJS’em i React’em. Dzisiaj będzie o dwóch różnych technikach na implementację GraphQL z React’em.

Pierwszą z nich jest React Apollo. Wykorzystałem ten sposób w poprzednim wpisie z serii gdzie użyłem go w przypadku komponentu klasowego. W tym wpisie zrobię to samo z komponentem funkcyjnym.

Druga metoda to GraphQL Hooks czyli to co tygrysy lubią najbardziej 🙂 Hooki już na dobre zadomowiły się w ekosystemie React’a i nic nie wskazuje na to aby się gdziekolwiek wybierały. Dlaczego z tego nie skorzystać?

Dodam jeszcze, że dzisiaj dodam do całego równania parametry w zapytaniu GraphQL. Dzięki temu będziesz mógł/a pobrać ze swojego API dowolne dane pasujące do zdefiniowanych parametrów. 

Ale o parametrach piszą wszyscy… Ja dodatkowo pokażę jak skonfigurować query (zapytanie) w NodeJS aby Back-End mógł takie zapytanie obsłużyć!

Seria GraphQL

Narazie wygląda to tak (choć np. ten wpis powstaje spontanicznie… seria jest jak rzeka… meandruje w różnych kierunkach 🙂 ):

  1. Czym jest GraphQL – teoria i dlaczego to ma sens?
  2. Serwer obsługujący GraphQL + integracja z Reactem
  3. React Apollo i GraphQL Hooks czyli różne podejścia do GraphQL
  4. Integracja Baz danych – MongoDB + MySQL
  5. Zaawansowane użycie GraphQL – mutacje itp.

Tutaj omawiam punkt 3. Cały kod który się później pojawi jest dostępny w tym repo. Ten projekt bazuje na kodzie napisanym w poprzednich częściach więc jeśli szukasz logicznej kontynuacji to sprawdź poprzednie wpisy.

Konfiguracja Back Endu

A więc abyśmy mogli obsługiwać parametry w zapytaniach GraphQL potrzebnych jest kilka modyfikacji… Ciągle jeszcze operuje na fejkowych danych (nie pobieram ich z bazy danych) więc nie będę ruszać pliku z danymi. Trzeba natomiast zmodyfikować Scheme (struktury danych)…

Plik schema.js

Czyli miejsce gdzie definiuje typy moich danych. Nowy kod wygląda w ten sposób:

A więc zapytanie definiuje się w type Query. Jak widać mam tu dwa zapytania:

countries który wykorzystuje strukturę danych Country. Zauważ, że w tym wypadku struktura jest ‘opakowana’ w [ ][. Oznacza to, że wynikiem tego zapytania będzie tablica przez którą będzie można później iterować.

Zapytanie country już nie jest opakowane w tablice więc wynikiem będzie pojedynczy obiekt o strukturze Country. Tego chcę bo w zapytaniu definiuje jeden parametr id: Int! który będzie miał typ Int czyli integer – liczba całkowita. Jak ktoś go poda to dostanie dokładnie jeden wynik zapytania.

Resolvers

Kolejnym krokiem jest dowiązanie naszego query country do realnych danych które mamy na serwerze. Są one zdefiniowane w obiekcie api.countries ( sprawdź repo z kodem żeby się lepiej połapać o co chodzi. Teraz mój resolver wygląda tak:

Pierwsze query countries jest przypisane do całego obiektu z danymi. Znaczy to tyle, że to zapytanie zwróci wszystkie dane które tam mamy.

Drugie zapytanie country jest tym o które nam teraz chodzi. Jak widzisz przyjmuje dwa parametry. Resolver może przyjąć kilka parametrów które kolejno spełniają różne funkcje. Parametr numer dwa args jest właśnie tym którzy przechowuje nasze parametry z query. Jest to obiekt zawierający to co wcześniej zdefiniowałeś/aś. W tym wypadku id.

Teraz jak widać aby znaleźć interesujące mnie dane używam zwykłej pętli for. Możesz tutaj szukać dane np. w bazie lub innym miejscu gdzie one są. Na potrzeby tego artykułu pętla for robi robotę. Po wszystkim zwracam obiekt który ma to o co mi chodzi.

Swoją drogą ostatnio znalazłem super materiał na temat wydajności różnych metod iteracji w JavaScript.

Test Query

W tym momencie Back-End powinien już działać i serwować dane. Odpal go w terminalu za pomocą komendy node app.js (jeżeli używasz kodu z mojego repo oczywiście 😛 ) i idź do GraphQL Playground zrobić test.

Na grafice poniżej widać jak powinien wyglądać taki test (jeśli nie wiesz jak testować zapytania w GraphQL sprawdź mój poprzedni wpis):

Jak widać wszystko hula!!!

Integracja z React

Czas pobrać dane na Front-End. A więc tak jak napisałem na początku będą dwie metody. Aby ich użyć potrzebne są dwa oddzielne importy modułów.

Plik index.js

Załóżmy, że cała akcja dzieje się tutaj. Potrzebujemy dwa oddzielne zestawy importów aby obsłużyć te metody:

Oczywiście Tobie będzie potrzebny tylko jeden w zależności od tego którą technikę wybierzesz 🙂

Providery

Teraz należy opakować aplikację w providery aby wszystkie komponenty wewnątrz miały do dostęp do GraphQL.

Dodałem komentarze aby oddzielić jedną metodę od drugiej. Choć taka kombinacja ciągle działa i możemy korzystać z obu technik jednocześnie to jak dla mnie to trochę bez sensu. Wybierz jedną technikę i ją używaj 🙂 Pozostały kod usuń/zignoruj.

Tak czy inaczej możemy już definiować query w poszczególnych komponentach!

Komponent Funkcyjny i React Apollo

No to konsumujemy w końcu to API… Implementacja w komponencie funkcyjnym jest dość prosta. Na jednym z londyńskich meetupów słyszałem, że komponenty funkcyjne są szybsze od klasowych i jeśli chcesz przyśpieszyć aplikację to używaj właśnie ich. Nie mam opinii na ten temat ale teraz jak mamy w zanadrzu hooki to rzeczywiście funkcje wystarczają do większości zastosowań.

Wkleję po prostu cały komponent 🙂 

Na początku oczywiście należy zdefiniować samo query z parametrami. Potem podajesz w znaczniku Query kolejną właściwość variables która jest obiektem z danymi potrzebnymi do query. W tym wypadku id.

Ja do query podałem dane z propsów ale mogą pochodzić z dowolnego innego miejsca tzn. formularze na stronie, redux, React Context, hooki czy co tam innego wymyślisz 🙂

GraphQL Hooks

No to finał dzisiejszej imprezy! Ostatni sposób który jest moim ulubionym 😀 Użyje hooka do pobrania danych z GraphQL. Generalnie nie działa to specjalnie inaczej od innych hooków w React’cie. Zasada podobna.

Zwróć uwagę, że teraz definiuje moje query w nieco inny sposób mianowicie nie używam metody gql i nie robię dla niej importu.

Dane do query ciągle pochodzą z propsów i podaje do hooka useQuery jako obiekt do drugiego parametru i właściwości variables która tam sobie żyje.

I jak tu nie lubić tego połączenia 🙂

Co więcej?

Na dzisiaj to już tyle. Jak chcesz to wszystko prześledzić z szerszej perspektywy to sprawdź to repo.

Surfując po necie odnoszę wrażenie, że powoli GraphQL staje się mainstreamową technologią. Jest masa materiałów na ten temat. Niestety tak mało po polsku…

Poza oczywistym punktem ( pobranie danych z bazy na Back-Endzie ) chciałbym jeszcze rozwinąć tą serię o customowe eventy, mutacje, zaawansowane zapytania i pewnie jeszcze kilka innych rzeczy 🙂 No ale wiadomo… Lato… Urlopy… Też mam pod koniec sierpnia 😀 Będzie bajlando…

Podsumowanie

Dzisiaj poznałeś/aś dwie niezależne techniki na pobieranie danych z API opartego na GraphQL.

Wiesz, że możesz zastosować do tego Hooki i jest to dość proste. Alternatywną metodą może być React Apollo który może być z łatwością zaimplementowany zarówno w komponentach klasowych jak i funkcyjnych.

Podziel się z innymi 🙂

Cześć jestem Bartek.

Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.

Warto
Social media & sharing icons powered by UltimatelySocial