- Styczeń 2021
- Marzec 2020
- Luty 2020
- Styczeń 2020
- Wrzesień 2019
- Sierpień 2019
- Lipiec 2019
- Czerwiec 2019
- Maj 2019
- Kwiecień 2019
- Marzec 2019
- Luty 2019
- Styczeń 2019
- Grudzień 2018
- Listopad 2018
- Październik 2018
- Wrzesień 2018
- Sierpień 2018
- Lipiec 2018
- Czerwiec 2018
- Maj 2018
- Kwiecień 2018
- Marzec 2018
- Luty 2018
- Styczeń 2018
- Listopad 2017
- Październik 2017
- Wrzesień 2017
- Sierpień 2017
- Lipiec 2017
- Czerwiec 2017
- Maj 2017
- Kwiecień 2017
- Marzec 2017
- Luty 2017
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:
- Czym jest GraphQL – teoria i dlaczego to ma sens?
- Serwer obsługujący GraphQL + integracja z Reactem
- React Apollo i GraphQL Hooks czyli różne podejścia do GraphQL
- Integracja Baz danych – MongoDB + MySQL
- 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:
- Super seria po Polsku od Overmenta
- Świetnie udokumentowane dokumentacje 🙂 z GraphQL’a i Apollo
- 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ł 🙂
Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?