GraphQL-subscriptions begrijpen

Welkom! In deze les gaan we dieper in op GraphQL-subscriptions, een krachtige functie voor realtime gegevensupdates. Stel je voor dat je rechtstreeks vanuit je server direct meldingen of live gegevensstromen ontvangt!

Met subscriptions kunnen clients automatisch updates ontvangen wanneer gegevens op de server veranderen, zonder steeds opnieuw om nieuwe informatie te hoeven vragen.

GraphQL heeft drie hoofdtypen bewerkingen:

• Query's: Worden gebruikt om gegevens op te halen. Zie het als een GET-aanvraag.
• Mutaties: Worden gebruikt om gegevens te wijzigen (aanmaken, bijwerken of verwijderen). Vergelijkbaar met POST, PUT en DELETE.
• Subscriptions: Worden gebruikt om je te abonneren op realtime gebeurtenissen, zodat je gegevens ontvangt zodra die beschikbaar zijn.

Elke bewerking heeft een eigen doel bij de interactie met je API.

Waarom zijn subscriptions zo belangrijk? Ze lossen het probleem op dat clientapplicaties voortdurend moeten pollen om over de nieuwste gegevens te beschikken.

• Chatapplicaties: Nieuwe berichten verschijnen onmiddellijk.
• Live dashboards: Meetwaarden worden in realtime bijgewerkt.
• Meldingen: Ontvang waarschuwingen zodra gebeurtenissen plaatsvinden.
• Aandelentickers: Bekijk prijswijzigingen onmiddellijk.

Ze zorgen voor een naadloze, dynamische gebruikerservaring.

In tegenstelling tot query's en mutaties, die uit één aanvraag-antwoordcyclus bestaan, brengen subscriptions een permanente verbinding tussen de client en de server tot stand.

Wanneer een client zich abonneert, stuurt deze een subscription-query naar de server. De server houdt de verbinding vervolgens open en stuurt gegevens naar de client zodra de aangevraagde gebeurtenis plaatsvindt.

GraphQL-subscriptions zijn voornamelijk gebaseerd op WebSockets. Een WebSocket is een communicatieprotocol dat full-duplexcommunicatiekanalen biedt via één TCP-verbinding.

Zie het als een tweerichtingsstraat die open blijft, zodat zowel de client als de server op elk moment berichten naar elkaar kunnen sturen, in tegenstelling tot traditioneel HTTP, dat met verzoeken en antwoorden werkt.

Voordat een WebSocket-verbinding volledig tot stand is gebracht, vindt er een speciaal HTTP-verzoek plaats dat een handshake wordt genoemd.

De client stuurt een HTTP-verzoek met een header "Upgrade". Als de server WebSockets ondersteunt, antwoordt deze met een header "Upgrade" en schakelt het protocol over van HTTP naar WebSocket. Daarna verloopt alle communicatie via het WebSocket-protocol.

Hier is een vereenvoudigde levenscyclus:

1. Verbinden: De client stuurt een WebSocket-handshake.
2. Abonneren: De client stuurt een GraphQL-subscriptionquery via de WebSocket.
3. Gebeurtenis activeren: De gegevens op de server veranderen, waardoor een gebeurtenis wordt geactiveerd.
4. Publiceren: De server stuurt de nieuwe gegevens (payload) naar de client die erop is geabonneerd.
5. Abonnement opzeggen/verbinding verbreken: De client sluit het abonnement of de verbinding.

In je GraphQL-schema definieer je subscriptions met het root-type subscription. Net als query en mutation bevat dit type een lijst met beschikbare realtimegebeurtenissen.

Elk veld binnen het type subscription vertegenwoordigt een gebeurtenis waarop een client zich kan abonneren. Het veld geeft aan welk type gegevens wordt geretourneerd wanneer de gebeurtenis plaatsvindt.

Zo kun je in je Schema Definition Language (SDL) een subscription voor een nieuwe opmerking definiëren:

type Subscription {
  commentAdded(postId: ID!): Comment!
}

type Comment {
  id: ID!
  content: String!
  author: String
  postId: ID!
}

Clients kunnen zich abonneren op commentAdded, een postId meegeven en telkens wanneer er voor die ID een nieuwe opmerking wordt geplaatst een object van het type Comment ontvangen.

Goed gedaan! Je hebt de basisprincipes van GraphQL-subscriptions geleerd.

• Ze bieden realtime-updates van gegevens.
• Ze gebruiken permanente verbindingen, vaak WebSockets.
• Ze verschillen van query's en mutations.
• De server stuurt gegevens naar clients zodra er gebeurtenissen plaatsvinden.

Vervolgens gaan we kijken hoe je dit in Spring Boot implementeert!