GraphQL-handledning för nybörjare: Vad är, funktioner och exempel

Vad är GraphQL?

GraphQL är en serversidesteknik för applikationslagret som utvecklades av Facebook, numera Meta, för att köra frågor med befintlig data. Den släpptes offentligt 2015 och har styrts av GraphQL. Foundation sedan 2018. GraphQL kan optimera RESTful API-anrop. Det ger ett deklarativt sätt att hämta och uppdatera dina data. GraphQL hjälper dig att ladda data från server till klient. Det gör det möjligt för programmerare att välja vilka typer av förfrågningar de vill göra.

Vad behöver du lära dig innan du lär dig GraphQL?

Denna GraphQL-handledning är baserad på uttrycka och NodeJs. Därför kan du lära dig GraphQL mycket enkelt med en grundläggande förståelse för NodeJS.

Varför använda GraphQL?

Följande är anledningarna till att använda GraphQL:

• Det ger en läsbar fråga.
• I GraphQL är det mycket enkelt att hantera många databaser.
• Den är lämplig för mikrotjänster och komplexa system.
• Du kan hämta data med ett enda API-anrop.
• Det hjälper dig med frågebatchning och cachning.
• Du stöter inte på problem med överhämtning och underhämtning.
• Skräddarsy önskemål efter dina behov.
• Det hjälper dig att upptäcka schemat i lämpligt format.
• GraphQL håller automatiskt dokumentationen synkroniserad med API-ändringar.
• API-utveckling är möjlig utan versionshantering.
• GraphQL-fält används i flera frågor som kan delas till en högre komponentnivå för återanvändning.
• Du kan välja vilka funktioner som ska exponeras och hur de fungerar.
• Den kan användas för snabb applikationsprototypping.

Tillämpningar av GraphQL

Här är de viktiga tillämpningarna av GraphQL:

• Det tillhandahåller Relay och andra klientramar
• GraphQL hjälper dig att förbättra prestandan för mobilappen.
• Det kan minska överhämtningsproblem för att sänka molntjänsten på serversidan och minska nätverksanvändningen på klientsidan.
• Den kan användas när klientapplikationen ska ange vilka fält som behövs i långa frågeformat.
• GraphQL kan utnyttjas fullt ut när du måste lägga till funktionalitet till ditt gamla eller befintliga API.
• Det används när du ska förenkla komplexa API.
• Blanda och mosa fasadmönster, som ofta används i objektorienterad programmering.
• När du måste samla data från mer än en plats till ett bekvämt API.
• Du kan använda GraphQL som en abstraction på ett befintligt API för att specificera svarsstruktur baserat på användarnas behov.

Dessa fördelar vilar alla på tre rörliga delar som arbetar tillsammans.

GraphQL nyckelkomponenter

Nu i denna GraphQL-handledning, låt oss lära oss nyckelkomponenterna i GraphQL:

Som visas i figuren ovan finns det tre nyckelkomponenter i GraphQL: 1) Fråga, 2) Resolver och 3) Schema.

Fråga

Frågan är en API-begäran som görs av klientdatorapplikationen. Den stöder förstärkningar och pekar på arrayer. Fråga används för att läsa eller hämta värden.

Delar av frågan:

Följande är de viktiga delarna av Query

1. Fält:

Ett fält indikerar helt enkelt att vi ber servern om specifik information. Följande är ett GraphQL-exempel på ett fält i en GraphQL-fråga.

query {
    team {
        id
        name
    }
}

Servern svarar med ett JSON-dokument vars form speglar frågan:

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

I GraphQL-exemplet ovan frågar vi servern efter fältet som heter team och dess underfält som id och name. GraphQL-servern returnerar exakt den data vi begärde.

2. Argument

In REST, kan vi bara skicka en enda uppsättning argument som URL segment och frågeparametrar. För att hämta en specifik profil ser ett typiskt REST-anrop ut så här:

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

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

lösa

Resolvers ger anvisningarna för att konvertera GraphQL-drift till data. De löser frågan till data genom att definiera resolverfunktioner.

Den visar servern processen samt platsen för att hämta data enligt ett specifikt fält. Resolvern separerar även databasschema och API-schema. Den separerade informationen hjälper till att modifiera innehållet som erhålls från databasen.

Schema

Ett GraphQL-schema är centrum för GraphQL-implementeringen. Den beskriver den funktionalitet som är tillgänglig för de klienter som ansluter till den.

Funktioner i GraphQL

Här är viktiga funktioner i GraphQL:

• Det tillhandahåller deklarativt frågespråk, vilket inte är absolut nödvändigt.
• Den är hierarkisk och produktcentrerad.
• GraphQL är starkt skrivet. Det betyder att frågor exekveras inom ramen för ett visst system.
• Frågor i GraphQL kodas i klienten, inte i servern.
• Den har alla funktioner i applikationslagret i OSI-modellen.

GraphQL-klienter

GraphQL-klient är en kod som gör POST-förfrågningar till en relevant GraphQL-server. Du kan fråga ett GraphQL API direkt, men det goda tillvägagångssättet är att utnyttja ett dedikerat klientbibliotek med hjälp av Relay.

Detta JavaSkriptbiblioteket är utvecklat av Facebook för att göra React-applikationer med GraphQL. GraphQL-klienter kan vara ett CMS som Drupal, en ensidig applikation, en mobilapplikation, etc.

GraphQL-servrar

GraphQL-servrar är serversidesimplementeringar av GraphQLs specifikation. Den visar dina data som ett GraphQL API, som ditt klientprogram kan fråga efter. databas.

GraphQL Gateways

Gateway är ett mikrotjänstmönster där du kan bygga en separat tjänst för att hantera andra backend-tjänster. Det erbjuder fungerande dokumentation och ett bekvämt sätt att samla in data från mer än en källa med en enda förfrågan.

GraphQL har ett bra sätt att faktorisera de dynamiska värdena från frågan. Den skickar dem som en separat ordbok. Dessa värden kallas variabler. När vi arbetar med variabler behöver vi göra följande tre saker:

1. Ersätt det statiska värdet i frågan med ett variabelnamn.
2. Deklarera variabelnamnet som en av variablerna som accepteras av GraphQL-frågan.
3. Skicka värdet i den transportspecifika ordboken över variabler.

Så här ser det ut totalt. Först frågan, som deklarerar variabeln:

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

Sedan skickas den separata ordlistan med variabelvärden bredvid:

{
    "episode": "JEDI"
}

Och svaret som returnerades av servern:

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

Som du kan se i ovanstående GraphQL-exempel har vi helt enkelt skickat en annan variabel än att behöva konstruera en ny fråga.

Vad är mutation?

En mutation är ett sätt att ändra datasetet i GraphQL. Den modifierar data i datalagret och returnerar ett värde. Mutationer hjälper dig att infoga, uppdatera eller radera data. Generellt definieras mutationer som en schemadel.

Punkter att tänka på när du designar GraphQL-mutationer

Här är de viktiga punkterna när du designar GraphQL:

• Namngivning: Först och främst måste du namnge ditt mutationsverb. Sedan substantivet, eller "objekt" om tillämpligt. Använd camelCase när du namnger mutationer.
• Specificitet: Du måste göra mutationsspecifik så mycket som möjligt. Mutationer bör representera semantiska åtgärder som användaren har vidtagit.
• Inmatningsobjekt: Använd en unik, nödvändig, indataobjekttyp som ett argument för att utföra mutation på klienten.
• Unik nyttolasttyp: Du bör använda en unik nyttolasttyp för varje mutation. Du kan också lägga till mutationsutgången som ett fält till den specifika nyttolasttypen.
• Häckande: Använd kapsling till din mutation varhelst det är vettigt. Det låter dig utnyttja GraphQL API fullt ut.

Frågor läses och mutationer skrivs. En tredje operationstyp täcker data som ändras medan klienten fortfarande är ansluten.

Vad är en prenumeration i GraphQL?

A prenumeration är den tredje operationstypen i GraphQL-specifikationen, vid sidan av fråga och mutation. En fråga och en mutation slutförs var och en i en begäran och svar. En prenumeration håller istället en långlivad anslutning öppen, vanligtvis via WebSockets, så att servern skickar ett nytt resultat till klienten varje gång en specifik händelse inträffar.

Syntaxen speglar en fråga, där nyckelordet prenumeration ersätter frågan:

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

Tre punkter skiljer prenumerationer åt i praktiken.

• Händelsedriven, inte omröstad: Klienten registrerar intresse en gång. Inget mer skickas förrän servern publicerar en matchande händelse, vilket är mycket billigare än upprepad pollning.
• Ett rotfält per prenumeration: Specifikationen tillåter endast ett enda toppnivåfält, till skillnad från en fråga som kan begära flera samtidigt.
• Bäst att hålla i liten skala: Tryck bara på de fält som gränssnittet måste uppdatera. Livechatt, aviseringar och pristickers är de vanligaste användningsområdena.

Skillnaden mellan GraphQL och REST

Följande tabell visar viktig skillnad mellan GraphQL och REST.

Appar och verktyg med öppen källkod som används av GraphQL

De viktiga appar och verktyg med öppen källkod som används av GraphQL är följande:

• GatsbyGatsby är en applikation som drivs av GraphQL och kan använda data som härrör från mer än en GraphQL API-källa. Du kan använda den för att utveckla en statisk och klientbaserad React-applikation.
• GraphiQL: Det är en IDE som integreras med webbläsaren och även interagerar med GraphQLs API. Några av funktionerna som GraphiQL inkluderar är mutationer, datafrågor och autokompletteringsfrågor.
• GraphQL lekplats: Det är en kraftfull IDE som har en inbyggd editor för att hantera mutationer, validering, GraphQl-frågor, prenumerationer etc. Utvecklaren kan använda denna IDE för att visualisera schemats struktur. Projektet är nu pensionerat och dess funktioner har återinförts i GraphiQL.
• prisma: Prisma är en databasabstraction-lagret, nu levererat som en typsäker ORM, som i stor utsträckning paras ihop med en GraphQL-server för att exponera CRUD-operationer (skapa, läsa, uppdatera och ta bort).
• Bit: Det är ett verktyg och plattform med öppen källkod som konverterar återanvändbar kod till komponenter. Utvecklare kan använda dem för att dela och utveckla olika projekt.

Vanliga frågor