Wat is GraphQL?

Wat is GraphQL?

In 2012 zat Facebook met het probleem dat hun mobiele app niet goed en snel werkte. De manier van pagina's opbouwen op de server en die naar de client sturen, was voor mobiel gebruik niet handig. De beschikbare API's sloten niet aan aan de behoeften, omdat ze te veel of juist te weinig gegevens verstrekten met vele losse API calls achter elkaar als gevolg. Een team van vijf developers bedacht dat het ook anders kon.

Ze kwamen met een opzet waarin de gegevens als een 'graaf' werden gemodelleerd. Een graaf, of graph in het Engels, is een concept waarin de gegevens worden weergegeven als punten die onderling verbonden zijn met lijnen. De punten kunnen bijvoorbeeld personen zijn, en de lijnen de vriendschappen tussen de personen. Of, de punten zijn berichten, en de lijnen de relaties tussen de berichten.

[caption id="attachment_1584" align="aligncenter" width="300"]

Een graaf met zes knopen[/caption]

Naast het modelleren van de data bedachten de developers ook dat het ophalen van de data efficiënter moest. Zo kwamen ze met een concept waarin je van tevoren opgeeft welke velden je wilt ophalen en welke relaties uit die velden meegestuurd moeten worden. Zo ontvang je alleen de data die je nodig hebt en verstuur je niets dat niet gebruikt wordt.

De specificatie van GraphQL werd in 2015 open source gemaakt. Daarna ging het hard. Grote spelers in de markt begonnen met GraphQL te ontwikkelen. Naast natuurlijk Facebook waren dat GitHub, Pinterest, Airbnb, Twitter en Medium. Github maakte zelfs hun API publiekelijk beschikbaar in oktober 2016. Het succes was onverwacht. Mede-ontwikkelaar Dan Shafer had daar wel een verklaring voor: "If you build something that people like using, it will generally do pretty well".

Maar hoe ziet het er nu uit?

Om echt uit te proberen hoe het werkt ga je naar GraphiQL. Dit is een in-browser tool om GraphQL queries te testen. Deze omgeving is door de GraphQL Foundation opgezet om van te leren. Er zit al wat testdata in, dus laten we eens kijken wat we hier kunnen opvragen.
Klik aan de rechterkant op 'Docs' zodat de Documentation Explorer tevoorschijn komt. Klik dan op de het woord 'Root'. Je hebt nu een overzicht van het Schema van deze GraphQL server. Hier zie je welke queries er mogelijk zijn en welke data je terug kunt verwachten. De GraphQL server genereert deze documentatie voor je. Zo heb je altijd de meest recente versie bij de hand!

We gaan nu de films, inclusief titel en regisseur, ophalen uit de database. Voer deze query uit door het in het linkerpaneel te plakken en op de playknop te drukken:

query {
 allFilms {
  films {
       id
       title
       director
  }
 }
}

De server voert je query uit en geeft in JSON-formaat een lijst terug met alle films die er bekend zijn, inclusief het id van de film.

Om informatie over een specifieke film op te halen, geef je deze query in:

query {
 film(id: "ZmlsbXM6NQ==") {
       id
       title
       director
 }
}

Je kunt tussen de haakjes parameters opgeven om op te zoeken. Hier hebben we de id van de film uit de eerste query gebruikt om specifieke informatie over deze film te vinden.

Een sterke kant van GraphQL is dat je eenvoudig de relaties van de objecten kunt ophalen. We kunnen de voorgaande query aanpassen, zodat we ook de karakters uit de film ophalen en van de karakters hun homeworld. Zo kun je in een keer alle gegevens ophalen die relevant zijn voor jouw specifieke gebruik.

query {
 film(id: "ZmlsbXM6NQ==") {
    id
      title
      characterConnection {
        characters {
          name
          height
          mass
          homeworld {
             name
          }
        }
      }
  }
}

Als je door de API-documentatie heen klikt, zie je dat er maar vijf basis-datatypen zijn: Int, String, Float, Boolean en ID. Door geen complexere typen aan te bieden (zoals set, mediumint of varchar) blijft de basis eenvoudig. Het is wel mogelijk om zelf Types te implementeren.

We hebben nu eenvoudige data uit de database gehaald. In de echte wereld heb je vaak meerdere query's nodig om een pagina op te bouwen. Denk aan een dashboard met allerlei verschillende gegevens. In GraphQL kun je de queries bundelen en in één keer naar de server sturen. Je krijgt dan ook in één keer alle gevraagde gegevens terug.

Met GraphQL kun je uiteraard ook gegevens aan je database toevoegen, aanpassen of verwijderen. Daarvoor worden mutations gebruikt. Een mutation om een nieuw karakter toe te voegen zou er zo uit kunnen zien:

mutation (
 $input: CreateCharacterInput!
) {
 createCharacter(input: $input) {
   id
   name
   height
   mass
 }
}

Om deze mutation uit te voeren moet je de input variable meesturen, zoals:

{
 "input": {
   "name": "Michel",
   "height": 1.72,
   "mass": 77
 }
}

De server kan dan terugsturen:

{
 "data": {
   "createCharacter": {
     "id": "101",
     "name": "Michel",
     "height": 1.72,
     "mass": 77
   }
 }
}

Ik wil meer!

Ok, als echte developer wil je natuurlijk meer dan even spelen met het voorbeeld. Een goede plek om te beginnen is de Apollo Server. Hier zet je eenvoudig een volledige GraphQL server mee op, inclusief database koppelingen en koppelingen naar externe REST en GraphQL API's.

Er zijn ook commerciële services waarbij je (bijna) niet hoeft te programmeren. Met Hasura kun je bijvoorbeeld snel een GraphQL API bouwen met minimale programmeerkennis.

GraphQL introduceren in bestaande projecten

Wanneer je 'from scratch' begint, kun je natuurlijk GraphQL gebruiken als basis voor je API. Heb je echter al een project lopen, dan lijkt het op het eerste gezicht lastiger om GraphQL te introduceren. Niets is minder waar. Je kunt GraphQL namelijk goed aansluiten op bestaande systemen. Zo kun je dus je bestaande database of API blijven gebruiken en de GraphQL-versie ernaast laten draaien. De bestaande applicaties blijven dan werken, terwijl nieuwe applicaties gebruik maken van GraphQL. Zo stap je snel in op deze nieuwe technologie.

‍