- 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?