Tworzę endpoint GraphQL w NodeJS i podpinam pod to React’a

Chcesz użyć GraphQL w swoim następnym projekcie? W tym artykule znajdziesz prostą integrację serwera w NodeJS z aplikacją front-endową napisaną w React’cie.

Czego się dzisiaj dowiesz?

Na początku postawię prosty serwer w NodeJS a następnie stworzę endpoint na Back-Endzie obsługujący zapytania z Front-Endu wysłane za pomocą GraphQL.

Kolejnym krokiem będą testy endpoint’a w Playground.

Kiedy Back-End będzie gotowy do obsługiwania zapytań zrobię prostą integrację z React’em.

Czego tu nie będzie?

GraphQL jest teraz na czasie. Opisanie wszystkiego co z nim związane i stworzenie w pełni funkcjonalnej aplikacji zdecydowanie wykracza poza możliwości jednego wpisu na blogu. 

Ja bym widział to co najmniej jako seria wpisów:

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.

W tym artykule opiszę punkt numer 2. Zakładam, że masz podstawową znajomość NodeJS’a i React’a.

Tworzenie serwera

Cały kod który się tu pojawi w międzyczasie jest dostępny w repozytorium na GitHubie. Jeżeli będą powstawały kolejne artykuły z serii wszystko będzie dostępne na oddzielnych branch’ach.

Aby zacząć pracę z GraphQL’em na Back-Endzie najlepiej wykorzystać Apollo Server. Jest to specjalny serwer napisany w NodeJS’ie ze zintegrowanym GraphQL’em. Jak się zapytasz co jest w nim takiego wyjątkowego to odpowiem: Nie wiem 🙂 Ale dokumentacja jest znakomita. Rozpoczęcie pracy to bułka z masłem 🙂

Apollo Server

Na początku należy stworzyć nowy projekt i zainstalować zależności. Oto komendy potrzebne w terminalu:

Teraz mamy wszystko aby zacząć pracę z serwerem

Back-End

Teraz w katalogu projektu stwórz plik z serwerem nazwijmy go np. app.js. Niech wygląda tak:

Przeanalizujmy po kolei co się tam dzieje.

Dane

Na początku potrzebujemy danych. Dla porządku umieściłem to osobnym pliku:

W tym pliku wykonałbym operacje pobierania/wysyłania danych z/do bazy danych. Ten wpis jednak nie skupia się na tym więc umieszczę w jednym obiekcie jakieś losowe dane:

Załóżmy, że są to dwa różne zestawy danych tzn. books i countries

Definicje Typów

Skoro dane już są czas zdefiniować typy i schematy tych danych na potrzeby GraphQL. Znowu osobny plik:

Dane zawarte w każdym zestawie mają odpowiednią strukturę którą tu definiujemy np. type Book czy type Country.

Każda właściwość w obiekcie z danymi musi mieć określony typ czyli np. String. Więcej o typach w GQL tutaj. Ten plik wygląda tak:

Na samym końcu definiujemy zapytania dostępne w GQL – type Query . W tym wypadku mamy dwa zestawy danych więc będą to odpowiednio books i countries.

Będziemy to potem testować.

Resolvery

Wracam do pliku app.js. Teraz czas dowiązać schemat danych do rzeczywistych danych. Robi się to w ten sposób:

Na końcu zostało już tylko zdefiniować serwer i go uruchomić.

Testowanie GraphQL

Aby uruchomić serwer w terminalu użyj komendy:

Teraz przejdź do przeglądarki i idź do http://localhost:4000/. Serwer Apollo udostępnia nam super narzędzie do testowania naszych zapytań – Playground. To coś podobnego np. do Postmana jeśli używasz REST API.

GraphQL Playground

Koncepcja jest bardzo prosta, tworzysz tutaj zapytanie i sprawdzasz, czy serwer zwraca dane. Wygląda to tak.

Jeśli chcesz sprawdzić jakie dane masz dostępne w poszczególnych queries/obiektach naciśnij ctrl + space.

Aby sprawdzić dokładnie schematy i typy danych ( które wcześniej zdefiniowałeś/aś ) naciśnij ten przycisk:

W praktyce jeśli chcesz zaimplementować jakieś zapytanie na Front-Endzie to tutaj je sprawdzasz i kopiujesz zawartość. Gotowe query wygląda np. tak:

countries {
  { name
    population
    inNato
  }
}

Integracja z React’em

Dobrze więc, Back-End działa i wysyła dane, czas na React’a!

Nowy projekt

Na początek kilka komend w terminalu aby stworzyć nową aplikację z React CLI i dodać niezbędne moduły ( wszystko się dzieje w folderze z gotowym Back-Endem ):

Teraz aplikacja w React powinna być uruchomiona na http://localhost:3000. Pamiętaj, że aby GraphQL działał musisz jednocześnie uruchomić serwer.

Konfiguracja Apollo

Powiem tak – to jest piękne… Wystarczy dodać Apollo w głównym pliku app.js, zdefiniować link do serwera na których żyje nasze API, i dodać odpowiedni wrapper w metodzie render(). W ten sposób będziesz mógł/a użyć potem GraphQL w dowolnym komponencie wewnątrz aplikacji. Plik może wyglądać tak:

Query w GraphQL

Teraz powinieneś/aś móc pobrać dane z dowolnego komponentu. Dla przykładu zrobię to w App.js.

Wygląda to tak, że importujemy potrzebne moduły i definiujemy stałą do której przypisujemy zapytanie skopiowane z testów:

Potem należy stworzyć komponent klasowy, przy renderowaniu opakować zawartość we wraper Query i podać jako props stałą z naszym zapytaniem. Cały plik może wyglądać np. tak:

Jak widać można też bardzo łatwo dodać obsługę błędów i loader. Nieźle co?

Jeśli sprawdzisz aplikację w przeglądarce powinieneś/aś zobaczyć wyświetlone dane o krajach z Twojego Back-Endu.

Co dalej?

To by w zasadzie było wszystko w dzisiejszym wpisie. Mam nadzieję, że ma to wszystko sens. Jeśli chcesz to sobie lepiej wyobrazić możesz sprawdzić repo z tym kodem.

Do tego linki do przydatnych materiałów w temacie: 

1. Super seria po Polsku od Overmenta
2. Świetnie udokumentowane dokumentacje 🙂 z GraphQL’a i Apollo
3. React + GraphQL default starter

Co ze mną?

No jeśli nie zabraknie mi pary ( której w wakacje trochę mniej… ) to spróbuję napisać jeszcze pozostałe artykuły z tej serii ( o których wspomniałem na początku ). Jeśli uważasz, że warto abym na to spojrzał to napisz w komentarzu lub w ankiecie na moim profilu na facebooku.

Podsumowanie

Dzisiaj dowiedziałeś/aś się jak stworzyć endpoint GraphQL w NodeJS’ie. Masz już podstawy na temat budowania schematów i typów danych w GQL oraz wiesz jak testować zapytania w Playground.

Zobaczyłeś/aś też przykład integracji GraphQL i React’a.

Jak dla mnie ta technologia jest mega i czekam z niecierpliwością na następny projekt w którym się tym będę bawił 🙂