Een beginnersgids voor GraphQL

Een van de meest besproken termen vandaag is de API. Veel mensen weten niet precies wat een API is. Kort gezegd staat API voor Application Programming Interface. Het is, zoals de naam al zegt, een interface waarmee mensen - ontwikkelaars, gebruikers, consumenten - kunnen communiceren met gegevens.

Je kunt een API beschouwen als een barman. Je vraagt ​​de barman om een ​​drankje en zij geven je wat je wilde. Gemakkelijk. Dus waarom is dat een probleem?

Sinds het begin van het moderne web is het bouwen van API's niet zo moeilijk als het klinkt. Maar API's leren en begrijpen was dat wel. Ontwikkelaars vormen de meerderheid van de mensen die uw API zullen gebruiken om iets te bouwen of gewoon gegevens te consumeren. Uw API moet dus zo schoon en zo intuïtief mogelijk zijn. Een goed ontworpen API is zeer eenvoudig te gebruiken en te leren. Het is ook intuïtief, een goed punt om in gedachten te houden wanneer u begint met het ontwerpen van uw API.

We gebruiken REST al lange tijd om API's te bouwen. Dat brengt ook enkele problemen met zich mee. Wanneer u een API bouwt met behulp van REST-ontwerp, krijgt u enkele problemen, zoals:

1) u zult veel eindpunten hebben

2) het zal veel moeilijker zijn voor ontwikkelaars om uw API te leren kennen en begrijpen

3) er is te veel en te weinig informatie

Om deze problemen op te lossen, heeft Facebook GraphQL gemaakt. Vandaag denk ik dat GraphQL de beste manier is om API's te bouwen. Dit artikel zal je vertellen waarom je het vandaag moet beginnen te leren.

In dit artikel ga je leren hoe GraphQL werkt. Ik ga je laten zien hoe je een zeer goed ontworpen, efficiënte, krachtige API kunt maken met GraphQL.

Je hebt waarschijnlijk al gehoord van GraphQL, omdat veel mensen en bedrijven het gebruiken. Omdat GraphQL open-source is, is de community enorm gegroeid.

Het is nu tijd om in de praktijk te leren hoe GraphQL werkt en alles over de magie.

Wat is GraphQL?

GraphQL is een open-source querytaal ontwikkeld door Facebook. Het biedt ons een efficiëntere manier om onze API's te ontwerpen, te maken en te gebruiken. Kortom, het is de vervanging voor REST.

GraphQL heeft veel functies, zoals:

  1. U schrijft de gegevens die u wilt, en u krijgt precies de gegevens die u wilt. Nooit meer informatie ophalen zoals we gewend zijn met REST.
  2. Het geeft ons een enkel eindpunt, niet meer versie 2 of versie 3 voor dezelfde API.
  3. GraphQL is sterk getypeerd en daarmee kunt u een query in het GraphQL-type systeem valideren voordat u het uitvoert. Het helpt ons om krachtigere API's te bouwen.

Dit is een basisintroductie van GraphQL - waarom het zo krachtig is en waarom het tegenwoordig enorm populair wordt. Als je er meer over wilt weten, raad ik je aan om naar de GraphQL-website te gaan en deze te bekijken.

Ermee beginnen

Het hoofddoel in dit artikel is niet te leren hoe u een GraphQL-server instelt, dus daar gaan we voorlopig niet diep op in. Het doel is om te leren hoe GraphQL in de praktijk werkt, dus we gaan een GraphQL-server zonder configuratie genaamd called Graphpack gebruiken.

Om ons project te starten, gaan we een nieuwe map maken en je kunt deze een naam geven wat je maar wilt. Ik ga het graphql-server noemen:

Open uw terminal en typ:

mkdir graphql-server

Nu zou u npm of garen in uw machine moeten hebben geïnstalleerd. Als u niet weet wat dit zijn, zijn npm en garen pakketbeheerders voor de programmeertaal JavaScript. Voor Node.js is de standaardpakketbeheerder npm.

Typ de volgende opdracht in uw gemaakte map:

npm init -y

Of als u garen gebruikt:

garen init

npm zal een package.json-bestand voor u maken, en alle afhankelijkheden die u hebt geïnstalleerd en uw opdrachten zullen er zijn.

Dus nu gaan we de enige afhankelijkheid installeren die we gaan gebruiken.

RaphGraphpack laat je een GraphQL-server maken met nulconfiguratie. Omdat we net beginnen met GraphQL, zal dit ons veel helpen om verder te gaan en meer te leren zonder ons zorgen te maken over een serverconfiguratie.

Installeer het in uw terminal, in uw hoofdmap, als volgt:

npm install - save-dev graphpack

Of, als je garen gebruikt, moet je zo gaan:

garen toevoegen - dev graphpack

Nadat Graphpack is geïnstalleerd, gaat u naar onze scripts in het bestand package.json en plaatst u de volgende code daar:

We gaan een map maken met de naam src en dit wordt de enige map op onze hele server.

Maak een map met de naam src, daarna gaan we in onze map slechts drie bestanden maken.

Maak in onze src-map een bestand met de naam schema.graphql. Plaats in dit eerste bestand de volgende code:

In dit schema.graphql-bestand wordt ons hele GraphQL-schema opgenomen. Als je niet weet wat het is, leg ik het later uit - maak je geen zorgen.

Maak nu een tweede bestand in onze map src. Noem het resolvers.js en plaats in dit tweede bestand de volgende code:

Dit bestand resolvers.js wordt de manier waarop we de instructies geven voor het omzetten van een GraphQL-bewerking in gegevens.

En ten slotte, in uw map src, maakt u een derde bestand. Noem dit db.js en plaats in dit derde bestand de volgende code:

In deze tutorial gebruiken we geen real-world database. Dus dit db.js-bestand gaat een database simuleren, alleen voor leerdoeleinden.

Nu zou onze src-map er zo uit moeten zien:

src
  | --db.js
  | --resolvers.js
  | --schema.graphql

Als u nu het commando npm run dev uitvoert of, als u garen, garen dev gebruikt, zou u deze uitvoer in uw terminal moeten zien:

Je kunt nu naar localhost: 4000. Dit betekent dat we klaar zijn om te beginnen met het schrijven van onze eerste vragen, mutaties en abonnementen in GraphQL.

U ziet de GraphQL Playground, een krachtige GraphQL IDE voor betere ontwikkelingsworkflows. Klik hier als u meer wilt weten over GraphQL Playground.

Schema

GraphQL heeft een eigen taaltype dat wordt gebruikt om schema's te schrijven. Dit is een voor mensen leesbare schemasyntaxis genaamd Schema Definition Language (SDL). De SDL zal hetzelfde zijn, ongeacht welke technologie u gebruikt - u kunt dit gebruiken met elke gewenste taal of elk framework.

Deze schemataal is erg handig omdat het eenvoudig te begrijpen is welke typen je API zal hebben. Je kunt het gewoon begrijpen door er goed uit te zien.

Soorten

Typen zijn een van de belangrijkste functies van GraphQL. Typen zijn aangepaste objecten die weergeven hoe uw API eruit gaat zien. Als u bijvoorbeeld een toepassing voor sociale media bouwt, moet uw API typen hebben zoals Berichten, Gebruikers, Likes, Groepen.

Typen hebben velden en deze velden retourneren een specifiek type gegevens. We gaan bijvoorbeeld een gebruikerstype maken, we moeten velden voor naam, e-mail en leeftijd hebben. Typevelden kunnen van alles zijn en retourneer altijd een gegevenstype als Int, Float, String, Boolean, ID, een lijst met objecttypen of aangepaste objecttypen.

Om nu ons eerste Type te schrijven, gaat u naar uw bestand schema.graphql en vervangt u het type Query dat er al is door het volgende:

Elke gebruiker krijgt een ID, dus we hebben het een ID-type gegeven. Gebruiker krijgt ook een naam en e-mailadres, dus we hebben het een tekenreekstype en een leeftijd gegeven, die we een Int-type hebben gegeven. Best simpel, toch?

Maar hoe zit het met die! aan het einde van elke regel? Het uitroepteken betekent dat de velden niet nulbaar zijn, wat betekent dat elk veld enkele gegevens in elke query moet retourneren. Het enige nulbare veld dat we in ons Gebruikerstype zullen hebben, is leeftijd.

In GraphQL behandelt u drie hoofdconcepten:

  1. zoekopdrachten - de manier waarop u gegevens van de server gaat ophalen.
  2. mutaties - de manier waarop u gegevens op de server gaat wijzigen en bijgewerkte gegevens terugkrijgt (maken, bijwerken, verwijderen).
  3. abonnementen - de manier waarop u een realtime verbinding met de server onderhoudt.

Ik ga ze allemaal aan je uitleggen. Laten we beginnen met zoekopdrachten.

Vragen

Om dit op een eenvoudige manier uit te leggen, zijn vragen in GraphQL hoe u gegevens krijgt. Een van de mooiste dingen over query's in GraphQL is dat u alleen de exacte gegevens krijgt die u zoekt. Niet meer niet minder. Dit heeft een enorm positief effect op onze API - geen informatie die te veel of te weinig wordt opgehaald zoals bij REST API's.

We gaan onze eerste type Query maken in GraphQL. Al onze vragen komen in dit type terecht. Dus om te beginnen gaan we naar ons schema.graphql en schrijven een nieuw type genaamd Query:

Het is heel eenvoudig: de gebruikersquery retourneert een reeks van een of meer gebruikers. Het zal niet null terugkeren, omdat we de! , wat betekent dat het een niet-nullable zoekopdracht is. Het moet altijd iets teruggeven.

Maar we kunnen ook een specifieke gebruiker retourneren. Daarvoor gaan we een nieuwe zoekopdracht maken met de naam gebruiker. Voer in ons Querytype de volgende code in:

Nu zou ons Querytype er zo uit moeten zien:

Zoals u ziet, kunnen we met vragen in GraphQL ook argumenten doorgeven. In dit geval geven we de ID door aan een specifieke gebruiker.

Maar je vraagt ​​je misschien af: hoe weet GraphQL waar de gegevens vandaan komen? Daarom moeten we een bestand resolvers.js hebben. Dat bestand vertelt GraphQL hoe en waar het de gegevens gaat ophalen.

Ga eerst naar ons bestand resolvers.js en importeer de db.js die we zojuist hebben gemaakt. Uw resolvers.js-bestand zou er zo uit moeten zien:

Nu gaan we onze eerste query maken. Ga naar je bestand resolvers.js en vervang de hallo-functie. Nu moet uw zoekopdracht er als volgt uitzien:

Nu, om uit te leggen hoe het gaat werken:

Elke queryresolver heeft vier argumenten. In de gebruikersfunctie gaan we id doorgeven als argument en geven we vervolgens de specifieke gebruiker die overeenkomt met de doorgegeven id. Erg makkelijk.

In de gebruikersfunctie gaan we gewoon de gebruikersmatrix teruggeven die al bestaat. Het zal altijd aan al onze gebruikers terugkeren.

Nu gaan we testen of onze vragen goed werken. Ga naar localhost: 4000 en voer de volgende code in:

Het zou naar al onze gebruikers moeten terugkeren.

Of, als u een specifieke gebruiker wilt retourneren:

Nu gaan we leren over mutaties, een van de belangrijkste functies in GraphQL.

mutaties

In GraphQL zijn mutaties de manier waarop u gegevens op de server gaat wijzigen en bijgewerkte gegevens terugkrijgt. Je kunt denken als de CUD (Maken, Bijwerken, Verwijderen) van REST.

We gaan onze eerste type mutatie maken in GraphQL, en al onze mutaties zullen in dit type terechtkomen. Dus om te beginnen, ga naar ons schema.graphql en schrijf een nieuw type genaamd mutatie:

Zoals je kunt zien, hebben we drie mutaties:

createUser: we moeten een ID, naam, e-mailadres en leeftijd doorgeven. Het zou een nieuwe gebruiker naar ons moeten retourneren.

updateUser: we moeten een ID en een nieuwe naam, e-mailadres of leeftijd doorgeven. Het zou een nieuwe gebruiker naar ons moeten retourneren.

deleteUser: we moeten een ID doorgeven. Het zou een nieuwe gebruiker naar ons moeten retourneren.

Ga nu naar ons bestand resolvers.js en maak onder het Query-object een nieuw mutatieobject als volgt:

Nu zou ons resolvers.js-bestand er zo uit moeten zien:

Nu gaan we testen of onze mutaties goed werken. Ga naar localhost: 4000 en voer de volgende code in:

Het zou een nieuwe gebruiker naar u moeten retourneren. Als je nieuwe mutaties wilt maken, raad ik je aan het zelf te proberen! Probeer dezelfde gebruiker die u heeft gemaakt te verwijderen om te zien of deze goed werkt.

Eindelijk gaan we leren over abonnementen en waarom ze zo krachtig zijn.

abonnementen

Zoals ik al eerder zei, zijn abonnementen de manier waarop u een realtime verbinding met een server onderhoudt. Dat betekent dat wanneer een gebeurtenis op de server plaatsvindt en wanneer die gebeurtenis wordt opgeroepen, de server de bijbehorende gegevens naar de client verzendt.

Door met abonnementen te werken, kunt u uw app op de hoogte houden van de nieuwste wijzigingen tussen verschillende gebruikers.

Een basisabonnement is als volgt:

Je zult zeggen dat het erg lijkt op een zoekopdracht, en ja dat is het. Maar het werkt anders.

Wanneer er iets wordt bijgewerkt op de server, voert de server de GraphQL-query uit die is opgegeven in het abonnement en stuurt een nieuw bijgewerkt resultaat naar de client.

We gaan niet werken met abonnementen in dit specifieke artikel, maar als u hier meer over wilt lezen, klik hier.

Gevolgtrekking

Zoals u hebt gezien, is GraphQL een nieuwe technologie die echt krachtig is. Het geeft ons echte kracht om betere en goed ontworpen API's te bouwen. Daarom raad ik je aan het nu te leren. Voor mij zal het uiteindelijk REST vervangen.

Bedankt voor het lezen van het artikel, geef hieronder een reactie!

Volg mij op Twitter!
Volg mij op GitHub!

Ik ben op zoek naar een mogelijkheid op afstand, dus als ik er iets over zou willen horen, neem dan alsjeblieft contact met me op via Twitter!