Samouczek GraphQL dla początkujących: co to jest, funkcje i przykład

Co to jest GraphQL?

GraphQL to technologia warstwy aplikacji działająca po stronie serwera, opracowana przez Facebooka w celu wykonywania zapytań na podstawie istniejących danych. GraphQL może optymalizować wywołania API RESTful. Daje deklaratywny sposób pobierania i aktualizowania danych. GraphQL pomaga ładować dane z serwera do klienta. Umożliwia programistom wybór typów żądań, które lubią wysyłać.

Dlaczego warto używać GraphQL?

Oto powody korzystania z GraphQL:

  • Zapewnia zapytanie zrozumiałe dla człowieka.
  • W GraphQL bardzo łatwo jest obsługiwać wiele baz danych.
  • Nadaje się do mikrousług i złożonych systemów.
  • Możesz pobrać dane za pomocą jednego wywołania API.
  • Pomaga w przetwarzaniu wsadowym zapytań i buforowaniu.
  • Nie napotykasz problemów z nadmiernym i niedostatecznym pobieraniem.
  • Dostosowanie żądań do Twoich potrzeb.
  • Pomaga odkryć schemat w odpowiednim formacie.
  • GraphQL automatycznie synchronizuje dokumentację ze zmianami w API.
  • Ewolucja API jest możliwa bez wersjonowania.
  • Pola GraphQL są używane w wielu zapytaniach, które można udostępniać na wyższym poziomie komponentów w celu ponownego użycia.
  • Możesz wybrać, które funkcje mają być widoczne i jak działają.
  • Można go wykorzystać do szybkiego prototypowania aplikacji.

Zastosowania GraphQL

Oto ważne zastosowania GraphQL:

  • Zapewnia Relay i inne platformy klienckie
  • GraphQL pomaga poprawić wydajność aplikacji mobilnej.
  • Może zmniejszyć problem nadmiernego pobierania, obniżając poziom usługi w chmurze po stronie serwera i zmniejszając wykorzystanie sieci po stronie klienta.
  • Można go użyć, gdy aplikacja kliencka musi określić, które pola są potrzebne w formacie długiego zapytania.
  • GraphQL można w pełni wykorzystać, gdy trzeba dodać funkcjonalność do starego lub istniejącego API.
  • Używa się go, gdy trzeba uprościć skomplikowane API.
  • Mieszaj i łącz wzór fasady, który jest powszechnie stosowany w programowaniu obiektowym.
  • Gdy musisz agregować dane z więcej niż jednego miejsca w jedno wygodne API.
  • Możesz użyć GraphQL jako abstrakcji istniejącego API, aby określić strukturę odpowiedzi w oparciu o potrzeby użytkownika.

Czego musisz się nauczyć zanim zaczniesz uczyć się GraphQl?

Ten samouczek GraphQL jest oparty na wyrazić i WęzełJ. Dlatego możesz bardzo łatwo nauczyć się GraphQL, mając podstawową wiedzę o NodeJS.

Kluczowe komponenty GraphQL

Teraz, w tym samouczku GraphQL, poznajmy kluczowe komponenty GraphQL:

Kluczowe komponenty GraphQL
Kluczowe komponenty GraphQL

Jak pokazano na powyższym rysunku, GraphQL składa się z trzech kluczowych komponentów: 1) Zapytanie, 2) Narzędzie do rozwiązywania problemów i 3) Schemat.

Pytanie

Zapytanie jest żądaniem API wysyłanym przez aplikację na komputerze klienckim. Obsługuje rozszerzenia i wskazuje na tablice. Zapytanie służy do odczytywania lub pobierania wartości.

Części zapytania:

Poniżej przedstawiono ważne części zapytania

  1. Pole:

Pole po prostu wskazuje, że prosimy serwer o określone informacje. Poniżej znajduje się przykład pola w zapytaniu graphQL w języku GraphQL.

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

W powyższym przykładzie GraphQL prosimy serwer o pole o nazwie zespół i jego podpola, takie jak identyfikator i nazwa. Serwer GraphQL zwraca dane, o które prosiliśmy.

  1. Argumenty

In REST, możemy przekazać tylko jeden zestaw argumentów jako segmenty URL i parametry zapytania. Aby uzyskać konkretny profil, typowe wywołanie REST będzie wyglądać następująco:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

rozwiązać

Resolvery dostarczają wskazówek dotyczących konwersji operacji GraphQL na dane. Rozwiązują zapytanie do danych poprzez zdefiniowanie funkcji resolvera.

Wyświetla serwerowi proces oraz lokalizację pobierania danych zgodnie z określonym polem. Mechanizm rozpoznawania nazw oddziela także schemat bazy danych od schematu API. Wyodrębnione informacje pozwalają na modyfikację treści uzyskanych z bazy danych.

schemat

Schemat GraphQL jest centrum implementacji GraphQL. Opisuje funkcjonalność dostępną dla łączących się z nią klientów.

Funkcje GraphQL

Oto ważne cechy GraphQL:

  • Zapewnia deklaratywny język zapytań, który nie jest konieczny.
  • Ma strukturę hierarchiczną i jest zorientowany na produkt.
  • GraphQL jest silnie typizowany. Oznacza to, że zapytania są wykonywane w kontekście konkretnego systemu.
  • Zapytania w GraphQL są kodowane w kliencie, a nie na serwerze.
  • Posiada wszystkie cechy warstwy aplikacyjnej modelu OSI.

Klienci GraphQL

Klient GraphQL to kod, który wysyła żądania POST do odpowiedniego serwera GraphQL. Możesz bezpośrednio wysyłać zapytania do API GraphQL, ale dobrym podejściem jest wykorzystanie dedykowanej biblioteki klienta za pomocą Relay.

To zdjęcie JavaBiblioteka skryptów została opracowana przez Facebooka do tworzenia aplikacji React z GraphQL. Klientami GraphQL mogą być CMS, takie jak Drupal, aplikacje jednostronicowe, aplikacje mobilne itp.

Serwery GraphQL

Serwery GraphQL są implementacją specyfikacji GraphQL po stronie serwera. Przedstawia Twoje dane jako GraphQL API, o które Twój program kliencki może zapytać baza danych.

Bramy GraphQL

Brama to wzorzec mikrousług, w którym można zbudować oddzielną usługę, która będzie obsługiwała inne usługi zaplecza. Oferuje wykonalną dokumentację i zapewnia wygodny sposób gromadzenia danych z więcej niż jednego źródła za pomocą jednego żądania.

Jaka jest zmienna w GraphQL?

A Zmienna w GraphQL służy do oddzielania wartości dynamicznych od zapytania klienta i przekazywania zapytania jako unikalnego słownika. Zmienną w GraphQL można również wykorzystać do ponownego wykorzystania zapytania lub mutacji napisanych przez klienta z indywidualnymi argumentami. W graphQL nie można przekazywać argumentów dynamicznych bezpośrednio w ciągu zapytania. Powodem jest to, że kod po stronie klienta musi dynamicznie manipulować ciągiem zapytania w momencie uruchamiania programu.

GraphQL ma jeden dobry sposób na faktoryzację wartości dynamicznych z zapytania. Przekazuje je jako oddzielny słownik. Te wartości są znane jako zmienne. Zawsze, gdy pracujemy ze zmiennymi, musimy wykonać następujące trzy czynności:

  1. Zastąp wartość statyczną w zapytaniu nazwą zmiennej.
  2. Zadeklaruj nazwę zmiennej jako jedną ze zmiennych akceptowanych przez zapytanie GraphQL.
  3. Przekaż wartość w słowniku zmiennych specyficznym dla transportu.

Oto jak to wygląda razem:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Jak widać w powyższym przykładzie GraphQL, po prostu przekazaliśmy inną zmienną, która nie wymagała skonstruowania nowego zapytania.

Co to jest mutacja?

Mutacja to sposób na zmianę zbioru danych w GraphQL. Modyfikuje dane w magazynie danych i zwraca wartość. Mutacje ułatwiają wstawianie, aktualizowanie i usuwanie danych. Ogólnie mutacje definiuje się jako część schematu.

Punkty do rozważenia podczas projektowania mutacji GraphQL

Oto ważne punkty podczas projektowania GraphQL:

  • Nazewnictwo: Przede wszystkim musisz nazwać swój czasownik mutacyjny. Następnie rzeczownik lub „dopełnienie”, jeśli ma to zastosowanie. Użyj camelCase podczas nazywania mutacji.
  • Specyficzność: Musisz w jak największym stopniu dostosować go do mutacji. Mutacje powinny reprezentować działania semantyczne podejmowane przez użytkownika.
  • Obiekt wejściowy: Użyj jednego, unikalnego, wymaganego typu obiektu wejściowego jako argumentu wykonania mutacji na kliencie.
  • Unikalny typ ładunku: Dla każdej mutacji powinieneś użyć unikalnego typu ładunku. Możesz także dodać wynik mutacji jako pole do tego konkretnego typu ładunku.
  • Zagnieżdżanie: Używaj zagnieżdżania swojej mutacji wszędzie tam, gdzie ma to sens. Pozwala w pełni wykorzystać API GraphQL.

Różnica między GraphQL i REST

Poniższa tabela przedstawia istotne różnice między GraphQL i REST.

GraphQL REST
Opiera się na architekturze zorientowanej na klienta. Opiera się na architekturze zorientowanej na serwer.
GraphQL można zorganizować w oparciu o schemat. REST można zorganizować w kategoriach punktów końcowych.
GraphQL to rozwijająca się społeczność. REST jest bardzo dużą społecznością.
Szybkość rozwoju w GraphQL jest duża. Szybkość rozwoju w REST jest niska.
Krzywa uczenia się w GraphQL jest trudna. Krzywa uczenia się w REST jest umiarkowana.
Tożsamość jest oddzielona od sposobu jej pobrania. Punkt końcowy, który wywołujesz w REST, jest tożsamością konkretnego obiektu.
W GraphQL serwer określa dostępne zasoby. Kształt i rozmiar zasobu określa serwer w REST.
GraphQL zapewnia wysoką spójność na wszystkich platformach. Trudno jest uzyskać spójność na wszystkich platformach.

Wady GraphQL

Oto wady GraphQL:

  • Młody ekosystem
  • Brak zasobów w części backendowej.
  • Brakujący wzorzec projektowy dla złożonej aplikacji.
  • Problemy z wydajnością w przypadku złożonych zapytań.
  • Przesada w przypadku małych aplikacji
  • GraphQL nie jest zależny od metod buforowania HTTP, które umożliwiają przechowywanie treści żądań.
  • GraphQL nie rozumie plików. Dlatego nie ma w nim funkcji przesyłania plików.
  • Dzięki GraphQL przygotuj się na dużą ilość edukacji przed rozwojem, takiej jak nauka języka definicji schematu.

Aplikacje i narzędzia typu open source używane przez GraphQL

Ważne aplikacje i narzędzia typu open source używane przez GraphQL są następujące:

  • Gatsby: Gastby to aplikacja oparta na GraphQL, która może wykorzystywać dane pochodzące z więcej niż jednego źródła API GraphQL. Możesz go użyć do opracowania statycznej i opartej na kliencie aplikacji React.
  • GraphiQL: Jest to identyfikator, który integruje się z przeglądarką, a także współdziała z API GraphQL. Niektóre z funkcji dostępnych w GraphiQL to mutacje, zapytania o dane i zapytania o autouzupełnianie.
  • GraphQL plac zabaw: Jest to potężne IDE z wbudowanym edytorem do obsługi mutacji, walidacji, zapytań GraphQl, subskrypcji itp. Programista może używać tego IDE do wizualizacji struktury schematu.
  • pryzmat: Prisma to warstwa abstrakcji bazy danych, która przekształca bazy danych w interfejsy API GraphQL z operacjami CRUD (tworzenie, odczytywanie, aktualizowanie i usuwanie).
  • Bit: Jest to narzędzie i platforma typu open source, która konwertuje kod wielokrotnego użytku na komponenty. Programiści mogą ich używać do udostępniania i rozwijania różnych projektów.

Podsumowanie

  • GraphQL to technologia warstwy aplikacji działająca po stronie serwera, opracowana przez Facebooka w celu wykonywania zapytań na podstawie istniejących danych.
  • Możesz użyć GraphQL do pobrania danych za pomocą jednego wywołania API.
  • GraphQL pomaga poprawić wydajność aplikacji mobilnej.
  • Ważnymi komponentami zapytań GraphQL są: 1) Zapytanie, 2) Narzędzie do rozwiązywania problemów, 3) Schemat.
  • GraphQL jest silnie typizowany. Oznacza to, że zapytania są wykonywane w kontekście konkretnego systemu.
  • Klient GraphQL to kod, który wysyła żądania POST do odpowiedniego serwera GraphQL.
  • Serwery GraphQL są implementacją specyfikacji GraphQL po stronie serwera.
  • Brama to wzorzec mikrousług, w którym można zbudować oddzielną usługę, która będzie obsługiwała inne usługi zaplecza.
  • GraphQL ma jeden dobry sposób na rozkład wartości dynamicznych z zapytania.
  • Mutacja to sposób na zmianę zbioru danych w GraphQL.
  • Ważnymi punktami podczas projektowania GraphQL są: 1) Nazewnictwo, 2) Specyficzność, 3) Obiekt wejściowy Unikalny typ ładunku oraz 4) Zagnieżdżanie.
  • GraphQL można zorganizować w oparciu o schemat, natomiast REST można zorganizować w oparciu o punkty końcowe.
  • Wadą GraphQL jest brak zasobów w części backendowej.