GraphQL Tutorial for begyndere: Hvad er, funktioner og eksempel

Hvad er GraphQL?

GraphQL er en serversideteknologi på applikationslaget, som blev udviklet af Facebook, nu Meta, til at udføre forespørgsler med eksisterende data. Den blev offentliggjort i 2015 og har været styret af GraphQL. Foundation siden 2018. GraphQL kan optimere RESTful API-kald. Det giver en deklarativ måde at hente og opdatere dine data på. GraphQL hjælper dig med at indlæse data fra server til klient. Det gør det muligt for programmører at vælge de typer anmodninger, de ønsker at foretage.

Hvad skal du lære, før du lærer GraphQL?

Denne GraphQL tutorial er baseret på Express og Nodejs. Derfor kan du meget nemt lære GraphQL med en grundlæggende forståelse af NodeJS.

Hvorfor bruge GraphQL?

Følgende er grundene til at bruge GraphQL:

• Det giver en forespørgsel, der kan læses af mennesker.
• I GraphQL er det meget nemt at håndtere mange databaser.
• Det er velegnet til mikrotjenester og komplekse systemer.
• Du kan hente data med et enkelt API-kald.
• Det hjælper dig med forespørgselsbatching og caching.
• Du står ikke over for problemer med overhentning og underhentning.
• Skræddersy ønsker til dine behov.
• Det hjælper dig med at finde skemaet i det passende format.
• GraphQL holder automatisk dokumentationen synkroniseret med API-ændringer.
• API-evolution er mulig uden versionering.
• GraphQL-felter bruges i flere forespørgsler, der kan deles til et højere komponentniveau til genbrug.
• Du kan vælge, hvilke funktioner der skal eksponeres, og hvordan de fungerer.
• Det kan bruges til hurtig applikationsprototypeping.

Anvendelser af GraphQL

Her er de vigtige anvendelser af GraphQL:

• Det giver Relay og andre klientrammer
• GraphQL hjælper dig med at forbedre ydeevnen af ​​mobilappen.
• Det kan reducere overhentningsproblemet for at sænke server-side cloud-service og reducere klientsiden, netværksbrug.
• Den kan bruges, når klientapplikationen skal angive, hvilke felter der er nødvendige i langt forespørgselsformat.
• GraphQL kan udnyttes fuldt ud, når du skal tilføje funktionalitet til din gamle eller eksisterende API.
• Det bruges, når du skal forenkle komplekse API.
• Bland og mos facademønster, som er almindeligt anvendt i objektorienteret programmering.
• Når du skal samle data fra mere end ét sted i én praktisk API.
• Du kan bruge GraphQL som en mavemuskeltraction på et eksisterende API for at specificere svarstruktur baseret på brugernes behov.

Disse fordele hviler alle på tre bevægelige dele, der arbejder sammen.

GraphQL nøglekomponenter

Lad os nu i denne GraphQL-tutorial lære de vigtigste komponenter i GraphQL:

Som vist i ovenstående figur er der tre nøglekomponenter i GraphQL: 1) Forespørgsel, 2) Resolver og 3) Skema.

Query

Forespørgslen er en API-anmodning lavet af klientmaskinens applikation. Det understøtter augments og peger på arrays. Forespørgsel bruges til at læse eller hente værdier.

Dele af forespørgsel:

Følgende er de vigtige dele af Query

1. Mark:

Et felt angiver blot, at vi beder serveren om bestemte oplysninger. Følgende er et GraphQL-eksempel på et felt i en GraphQL-forespørgsel.

query {
    team {
        id
        name
    }
}

Serveren svarer med et JSON-dokument, hvis form afspejler forespørgslen:

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

I ovenstående GraphQL-eksempel beder vi serveren om feltet kaldet team og dets underfelter som id og name. GraphQL-serveren returnerer præcis de data, vi bad om.

2. argumenter

In REST, kan vi kun sende et enkelt sæt argumenter som URL segmenter og forespørgselsparametre. For at få en bestemt profil vil et typisk REST-kald se således ud:

GET /api/team?id=2
Content-Type: application/json

{
    "id": 2,
    "name": "Justice League"
}

resolver

Resolvere giver vejledningen til at konvertere GraphQL-drift til data. De løser forespørgslen til data ved at definere resolverfunktioner.

Det viser serveren processen samt placeringen for at hente data i henhold til et specifikt felt. Resolveren adskiller også databaseskema og API-skema. De adskilte oplysninger hjælper med at ændre indholdet, der er hentet fra databasen.

Planlæg

Et GraphQL-skema er centrum for GraphQL-implementering. Den beskriver den funktionalitet, der er tilgængelig for de klienter, der opretter forbindelse til den.

Funktioner i GraphQL

Her er vigtige funktioner i GraphQL:

• Det giver deklarativt forespørgselssprog, hvilket ikke er bydende nødvendigt.
• Det er hierarkisk og produktcentreret.
• GraphQL er stærkt skrevet. Det betyder, at forespørgsler udføres inden for konteksten af ​​et bestemt system.
• Forespørgsler i GraphQL er kodet i klienten, ikke i serveren.
• Den har alle funktionerne i OSI-modellens applikationslag.

GraphQL-klienter

GraphQL-klient er en kode, der sender POST-anmodninger til en relevant GraphQL-server. Du kan forespørge en GraphQL API direkte, men den gode tilgang er at udnytte et dedikeret klientbibliotek ved hjælp af Relay.

Denne JavaScriptbiblioteket er udviklet af Facebook til at lave React-applikationer med GraphQL. GraphQL-klienter kan være et CMS som Drupal, en enkeltsideapplikation, en mobilapplikation osv.

GraphQL-servere

GraphQL-servere er serversideimplementeringer af GraphQLs specifikation. De viser dine data som en GraphQL API, som dit klientprogram kan forespørge om. database.

GraphQL Gateways

Gateway er et mikroservicemønster, hvor du kan bygge en separat service til at håndtere andre backend-tjenester. Det tilbyder brugbar dokumentation og giver en bekvem måde at indsamle data fra mere end én kilde med en enkelt anmodning.

GraphQL har én god måde at faktorisere de dynamiske værdier ud af forespørgslen. Den sender dem som en separat ordbog. Disse værdier kaldes variabler. Når vi arbejder med variabler, skal vi gøre følgende tre ting:

1. Erstat den statiske værdi i forespørgslen med et variabelnavn.
2. Erklær variabelnavnet som en af ​​de variabler, der accepteres af GraphQL-forespørgslen.
3. Send værdien i den transportspecifikke ordbog over variabler.

Sådan ser det ud i det hele taget. Først forespørgslen, som deklarerer variablen:

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

Så den separate ordbog med variabelværdier, der sendes ved siden af:

{
    "episode": "JEDI"
}

Og svaret returneret af serveren:

{
    "data": {
        "hero": {
            "name": "R2-D2",
            "friends": [
                { "name": "Luke Skywalker" },
                { "name": "Han Solo" },
                { "name": "Leia Organa" }
            ]
        }
    }
}

Som du kan se i ovenstående GraphQL-eksempel, har vi simpelthen videregivet en anden variabel end at skulle konstruere en ny forespørgsel.

Hvad er mutation?

En mutation er en måde at ændre datasættet i GraphQL. Den ændrer data i datalageret og returnerer en værdi. Mutationer hjælper dig med at indsætte, opdatere eller slette data. Generelt er mutationer defineret som en skemadel.

Punkter at overveje, når du designer GraphQL-mutationer

Her er de vigtige punkter, mens du designer GraphQL:

• Navngivning: Først og fremmest skal du navngive dit mutationsverbum. Derefter substantivet eller "objektet", hvis det er relevant. Brug camelCase, mens du navngiver mutationer.
• Specificitet: Du skal gøre mutationsspecifik så meget som muligt. Mutationer bør repræsentere semantiske handlinger foretaget af brugeren.
• Input objekt: Brug en entydig, påkrævet input-objekttype som et argument for at udføre mutation på klienten.
• Unik nyttelasttype: Du bør bruge en unik nyttelasttype for hver mutation. Du kan også tilføje mutationsoutput som et felt til den pågældende nyttelasttype.
• Indlejring: Brug nesting til din mutation, hvor end det giver mening. Det giver dig mulighed for fuldt ud at udnytte GraphQL API.

Forespørgsler læses og mutationer skrives. En tredje operationstype dækker data, der ændres, mens klienten stadig er forbundet.

Hvad er et abonnement i GraphQL?

A abonnement er den tredje operationstype i GraphQL-specifikationen, sammen med forespørgsel og mutation. En forespørgsel og en mutation fuldføres hver især i én anmodning og svar. Et abonnement holder i stedet en langvarig forbindelse åben, normalt via WebSockets, så serveren sender et nyt resultat til klienten, hver gang en bestemt hændelse indtræffer.

Syntaksen afspejler en forespørgsel, hvor nøgleordet abonnement erstatter forespørgsel:

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

Tre punkter adskiller abonnementer i praksis.

• Begivenhedsdrevet, ikke afstemt: Klienten registrerer interesse én gang. Der sendes ikke yderligere, før serveren offentliggør en matchende hændelse, hvilket er langt billigere end gentagen polling.
• Et rodfelt pr. abonnement: Specifikationen tillader kun et enkelt felt på topniveau, i modsætning til en forespørgsel, der kan anmode om flere på én gang.
• Bedste holdt små: Tryk kun på de felter, hvor brugergrænsefladen skal opdateres. Livechat, notifikationer og prismarkører er de typiske anvendelser.

Forskellen mellem GraphQL og REST

Følgende tabel viser vigtig forskel mellem GraphQL og REST.

Open Source apps og værktøjer brugt af GraphQL

De vigtige open source apps og værktøjer, der bruges af GraphQL, er som følger:

• GatsbyGatsby er en applikation drevet af GraphQL, der kan bruge data, der er afledt af mere end én GraphQL API-kilde. Du kan bruge den til at udvikle en statisk og klientbaseret React-applikation.
• GraphiQL: Det er et IDE, der integrerer med browseren og også interagerer med GraphQLs API. Nogle af de funktioner, som GraphiQL inkluderer, er mutationer, dataforespørgsler og autofuldførelsesforespørgsler.
• GraphQL legeplads: Det er et kraftfuldt IDE med en indbygget editor til håndtering af mutationer, validering, GraphQl-forespørgsler, abonnementer osv. Udvikleren kan bruge dette IDE til at visualisere skemaets struktur. Projektet er nu pensioneret, og dets funktioner er blevet integreret i GraphiQL igen.
• Prisma: Prisma er en databaseabstraction-laget, nu leveret som en typesikker ORM, der er bredt parret med en GraphQL-server for at eksponere CRUD (Create, Read, Update and Delete) operationer.
• Bit: Det er open source værktøj og platform, der konverterer genbrugelig kode til komponenter. Udviklere kan bruge dem til at dele og udvikle forskellige projekter.

Ofte Stillede Spørgsmål