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

Co to jest GraphQL?

GraphQL to technologia warstwy aplikacji po stronie serwera, opracowana przez Facebooka, obecnie Meta, do wykonywania zapytań na istniejących danych. Została udostępniona publicznie w 2015 roku i podlega standardowi GraphQL. Foundation Od 2018 roku. GraphQL optymalizuje wywołania API RESTful. Oferuje deklaratywny sposób pobierania i aktualizowania danych. GraphQL ułatwia ładowanie danych z serwera do klienta. Umożliwia programistom wybór typów żądań, które chcą wysyłać.

Czego musisz się nauczyć, zanim zaczniesz uczyć się GraphQL?

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

Dlaczego warto używać GraphQL?

Oto powody korzystania z GraphQL:

• Zapewnia zapytanie zrozumiałe dla człowieka.
• W GraphQL obsługa wielu baz danych jest bardzo prosta.
• 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 będziesz mieć problemów z pobieraniem zbyt dużych lub zbyt małych ilości danych.
• 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 używać do szybkiego prototypowania aplikacjiping.

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żywać GraphQL jako abstracwykorzystanie istniejącego API w celu określenia struktury odpowiedzi na podstawie potrzeb użytkownika.

Wszystkie te korzyści opierają się na trzech ruchomych, współpracujących ze sobą częściach.

Kluczowe komponenty GraphQL

Teraz, w tym samouczku GraphQL, poznajmy 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 wskazuje po prostu, że prosimy serwer o określone informacje. Poniżej znajduje się przykład pola w zapytaniu GraphQL.

query {
    team {
        id
        name
    }
}

Serwer odpowiada dokumentem JSON, którego kształt odzwierciedla zapytanie:

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

W powyższym przykładzie GraphQL pytamy serwer o pole o nazwie „team” i jego podpola, takie jak „id” i „name”. Serwer GraphQL zwraca dokładnie te dane, o które prosiliśmy.

2. Argumenty

In RESTmożemy przekazać tylko jeden zestaw argumentów jako URL Segmenty 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.

Ten 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 to implementacje specyfikacji GraphQL po stronie serwera. Przedstawiają one Twoje dane jako API GraphQL, które Twój program kliencki może przeszukiwać. baza danych.

Bramy GraphQL

Gateway to wzorzec mikrousług, w którym można zbudować osobną usługę do obsługi innych usług zaplecza. Oferuje on praktyczną dokumentację i umożliwia wygodne zbieranie danych z więcej niż jednego źródła za pomocą jednego żądania.

GraphQL oferuje jeden dobry sposób na faktoryzację wartości dynamicznych z zapytania. Przekazuje je jako osobny słownik. Te wartości nazywane są zmiennymi. 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 wszystko wygląda. Najpierw zapytanie, które deklaruje zmienną:

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Następnie oddzielny słownik wartości zmiennych wysyłany obok niego:

{
    "episode": "JEDI"
}

A oto odpowiedź zwrócona przez serwer:

{
    "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.

Zapytania odczytują, a mutacje zapisują. Trzeci typ operacji obejmuje dane, które zmieniają się, gdy klient jest nadal połączony.

Czym jest subskrypcja w GraphQL?

A subskrypcja to trzeci typ operacji w specyfikacji GraphQL, obok zapytania i mutacji. Zapytanie i mutacja są realizowane w ramach jednego żądania i odpowiedzi. Subskrypcja utrzymuje natomiast otwarte, długotrwałe połączenie, zazwyczaj przez WebSockets, dzięki czemu serwer przesyła klientowi nowy wynik za każdym razem, gdy wystąpi określone zdarzenie.

Składnia odzwierciedla zapytanie, w którym słowo kluczowe subskrypcji zastępuje zapytanie:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

W praktyce subskrypcje różnią się trzema punktami.

• Zdarzeniowo, a nie sondowane: Klient rejestruje zainteresowanie raz. Nic więcej nie jest wysyłane, dopóki serwer nie opublikuje pasującego zdarzenia, co jest znacznie tańsze niż wielokrotne odpytywanie.
• Jedno pole główne na subskrypcję: Specyfikacja dopuszcza tylko jedno pole najwyższego poziomu, w przeciwieństwie do zapytania, które może żądać kilku pól naraz.
• Najlepiej zachować małą wielkość: Prześlij tylko pola, które interfejs musi odświeżyć. Typowe zastosowania to czat na żywo, powiadomienia i tickery cenowe.

Różnica między GraphQL i REST

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

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:Gatsby to aplikacja oparta na GraphQL, która może wykorzystywać dane pochodzące z więcej niż jednego źródła API GraphQL. Można jej używać do tworzenia statycznych i klienckich aplikacji React.
• GraphiQL: To środowisko programistyczne (IDE), które integruje się z przeglądarką i współpracuje z API GraphQL. Wśród funkcji GraphiQL znajdują się mutacje, zapytania o dane i automatyczne uzupełnianie zapytań.
• GraphQL plac zabaw: To potężne środowisko IDE z wbudowanym edytorem do obsługi mutacji, walidacji, zapytań GraphQl, subskrypcji itp. Deweloper może używać tego środowiska IDE do wizualizacji struktury schematu. Projekt został wycofany, a jego funkcje zostały ponownie włączone do GraphiQL.
• pryzmat: Prisma jest bazą danych abstracwarstwa komunikacyjna, obecnie dostarczana jako ORM o bezpiecznym typie, która jest szeroko łączona z serwerem GraphQL w celu udostępniania operacji CRUD (tworzenie, odczyt, aktualizacja 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.

FAQ