Wat is GraphQL?

Geschreven door Michel Boezerooij op Oct 15, 2020

Tips van een expert

Wanneer je start met het bouwen van een webapplicatie zijn er talloze vragen die je moet beantwoorden. Welke technieken gebruik ik voor de frontend? Welke frameworks voor de backend? Welke database ga ik gebruiken? Sommige keuzes zijn al voor je gemaakt. De klant wil communiceren met een bepaalde API, of er is een MySQL database met gegevens. Zit je daar dan aan vast? In dit artikel laat ik zien hoe GraphQL je kan helpen de interactie tussen frontend en backend te versimpelen en hoe je het kan gebruiken om allerhande API's en databases te ontsluiten via een uniform systeem.

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.

apollo docs

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.

Doe de datascan
Wil je weten welk level van datavolwassenheid jouw organisatie heeft, en wat je moet doen om verder te groeien? Doe dan eerst onze datascan.

  • ✔ Invullen kost enkele minuten
  • ✔ Je krijgt per e-mail een gratis rapport met toelichting
  • ✔ Binnen twee dagen weet je waar je staat

Benieuwd wat wij allemaal doen?

Bekijk al onze diensten en ontdek de mogelijkheden met data & AI.

Verwante
blogartikelen

De sleutel tot succes: een effectieve datastrategie

Een datastrategie, of tegenwoordig zelfs een data & AI strategie, vormt de route voor het verzamelen, analyseren en gebruiken van data & AI.
Leen Timmers
February 1, 2024
15 min

De combinatie van Artificial Intelligence en zinvol werken

Dat de aandacht voor data & AI toeneemt en dat de waarde steeds vaker aangetoond wordt is duidelijk. Zo blijkt uit het thema van de 16e...
Leen Timmers
January 18, 2024
10 min

Wat is Infrastructure as Code?

Veel bedrijven specialiseren zich in software ontwikkeling of data. Bij Little Rocket doen we beide. We zoeken continue naar de beste...
July 30, 2020
15 min

Van prep naar predictive: onze visie op data

Afgelopen week vond de Big Data Expo 2019 plaats in de jaarbeurs in Utrecht. Een plek waar mensen samenkomen met een gedeelde interesse...
February 29, 2020
5 min

De 7 dimensies van digitale volwassenheid die je moet weten voor je gaat transformeren

Digitale transformatie. We willen het allemaal, net zoals ‘iets met’ Big Data, Marketing Automation & AI. En we strugglen er ook...
Marc van Belkum
February 25, 2020
5 min

Groeien met data… daar komt geen einde aan

Zelfs als uit onze datascan blijkt dat je het hoogste level van datavolwassenheid hebt bereikt, kun je blijven groeien met data...
Marc van Belkum
June 20, 2023
10 min

Op weg naar een toekomst zonder geheimen 

Wat gaat er morgen gebeuren? Op die vraag kun je een behoorlijk betrouwbaar antwoord geven als je organisatie level 4 van...
Marc van Belkum
May 31, 2023
10 min

Waarom? Waarom? Waarom?

‘We halen veel nieuwe klanten binnen, halen onze salestargets, maar waarom stijgt onze omzet niet?’ Met dit soort waarom-vragen ga je aan...
Marc van Belkum
May 4, 2023
10 min

Wie is de beste data-ontdekker?

Komt uit onze datascan dat je op level 2 zit van datavolwassenheid? Dan is het tijd om te experimenteren! In deze fase heb je al wat data...
Marc van Belkum
April 26, 2023
10 min

Waarom kwalitatieve data broodnodig is

Elk bedrijf, groot of klein, heeft data. Maar niet elk bedrijf dóet iets met die data. In dit tweede blog (uit een serie van zes) lees je...
Marc van Belkum
April 5, 2023
10 min

Claim nú marketingbudget voor Google Analytics 4 in 2023

Kijk je soms, regelmatig of vaak naar de bezoekersaantallen van je website? Maar zegt de datum 1 juli 2023 je weinig? Dan ben je niet...
Leen Timmers
November 24, 2022
5 min

Waarom hardlopers straks weglopen met datasynthese

Marc van Belkum
April 7, 2022
5 min

Third party data stopt, zet je eigen data in voor sales & marketing!

Met het steeds verder beperken van third party (cookie) data verandert het digital marketing landschap sterk. En daarmee ook de...
May 28, 2020
10 min

De waarde van data analyse voor jouw bedrijf

Ieder bedrijf genereert data, bewust of onbewust. Als je die data links laat liggen gebeurt er niets. Gebruik je data om beter te worden.
Jelle Scholten
May 20, 2020
5 min

In drie stappen van data naar business inzicht

In de afgelopen jaren hebben veel bedrijven steeds meer data verzameld. Waarom? Omdat data het nieuwe goud is....
Jelle Scholten
February 27, 2020
5 min

De vijf levels van data-volwassenheid

Hoe hard is het nodig voor jouw bedrijf om te investeren in data? Dat hangt af van twee dingen: hoe datavolwassen je concurrenten...
Marc van Belkum
September 7, 2022
4 min

“Dankzij data maken we nu slimmere keuzes”

We horen de term steeds vaker: datavolwassenheid. Terecht, wat ons betreft, want bedrijven die mede dankzij data...
Leen Timmers
October 5, 2022
3 min