Natuurlijk! Hier is een duidelijke uitleg en voorbeeldcode om de basisprincipes van GraphQL queries en mutaties te begrijpen en toe te passen met jouw gegevens. **Wat is GraphQL?** GraphQL is een taal voor het ophalen en muteren van data via een API. In plaats van meerdere endpoints te gebruiken, vraag je met één query precies aan wat je nodig hebt. --- ### Basisprincipes **Objecttypes en velden:** - Boek: heeft velden `id`, `titel`, `auteur`, `publicatiejaar` - Auteur: heeft velden `id`, `naam` **Queries:** - Vraag data op. Je specificeert welke velden je wilt zien. - Voorbeeld: haal een boek met `id=1` op en toon de `titel` en de `auteur`. **Mutaties:** - Wijzigen of toevoegen van data. - Voorbeeld: voeg een nieuw boek toe met een titel en auteur. --- ### Voorbeeld 1: Een boek ophalen ```graphql query { boek(id: 1) { titel auteur { naam } } } ``` **Uitleg:** - `query` geeft aan dat je data opvraagt. - `boek(id: 1)` vraagt het boek met `id=1`. - Binnen de accolades geef je aan welke velden je wilt zien: `titel` en de `auteur`'s `naam`. --- ### Voorbeeld 2: Een nieuw boek toevoegen (Mutatie) ```graphql mutation { voegBoek(titel: "Nieuwe Titel", auteurId: 2) { id titel auteur { naam } } } ``` **Uitleg:** - `mutation` geeft aan dat je data wijzigt of toevoegt. - `voegBoek` is een voorbeeld naam voor de mutatie, met parameters `titel` en `auteurId`. - Na het uitvoeren zie je terug: het nieuwe boek met `id`, `titel` en de `auteur`'s `naam`. --- ### Samenvatting - **Queries** zijn voor het ophalen van data. Geef aan welke velden je wilt zien. - **Mutaties** zijn voor het wijzigen of toevoegen van data. Geef de benodigde parameters en ontvang de gewijzigde data terug. --- **Tip:** Gebruik een tool zoals GraphiQL of Insomnia om je queries en mutaties eenvoudig te testen. Vaak krijg je ook documentatie en autocompletion. --- Wil je nog een voorbeeld van een query of mutatie?

Absoluut! Hier is een duidelijke uitleg in het Nederlands over de basisprincipes van GraphQL queries en mutaties, toegespitst op jouw voorbeeld. ### De Kernbegrippen: Query en Mutatie * **Query (`query`)**: Het **ophalen** of **lezen** van data. Vergelijkbaar met een `GET` request of een `SELECT` statement in SQL. Dit is wat je doet om informatie van de server te vragen. * **Mutatie (`mutation`)**: Het **wijzigen** van data. Dit omvat het aanmaken, updaten of verwijderen van gegevens. Vergelijkbaar met `POST`, `PUT`, `DELETE` requests of `INSERT`, `UPDATE` in SQL. --- ### 1. De Opbouw van een GraphQL Query Een query specificeert precies welke gegevens je wilt ontvangen en in welke vorm. Je vraagt nooit meer of minder dan nodig. **Jouw voorbeeldquery: "Haal een boek op met id 1 en toon titel en auteur"** De GraphQL query ziet er zo uit: ```graphql query { boek(id: 1) { titel auteur { naam } } } ``` **Uitleg:** * `query`: Het keyword dat aangeeft dat dit een leesoperatie is. * `boek(id: 1)`: Dit is het **veld** dat je aanroept, met een **argument** (`id: 1`) om aan te geven *welk* boek je wilt. De server heeft een resolver functie voor `boek` die weet wat hij moet doen met dit ID. * `{ titel auteur { naam } }`: Dit is de **selection set**. Hierin definieer je precies welke **velden** van het opgevraagde `boek` object je terug wilt krijgen. * Je vraagt het veld `titel` op. * Je vraagt het veld `auteur` op. Omdat `auteur` zelf een objecttype is, moet je ook zijn velden specificeren in een geneste selection set `{ naam }`. **Mogelijk response van de server (JSON):** ```json { "data": { "boek": { "titel": "De Avond", "auteur": { "naam": "Anna Enquist" } } } } ``` Zoals je ziet, krijg je de data exact terug in dezelfde structuur als je query. --- ### 2. De Opbouw van een GraphQL Mutatie Mutaties worden gebruikt om data te veranderen. Ze lijken sterk op queries, maar beginnen uiteraard met het keyword `mutation`. **Jouw voorbeeldmutatie: "Voeg een nieuw boek toe met titel en auteur"** Eerst moet je weten welk veld en welke argumenten de server beschikbaar stelt voor deze actie. Laten we aannemen dat het veld `voegBoekToe` heet. De GraphQL mutatie ziet er zo uit: ```graphql mutation { voegBoekToe(titel: "Nieuw Boek", auteurId: 2) { id titel publicatiejaar } } ``` **Uitleg:** * `mutation`: Het keyword dat aangeeft dat dit een schrijfoperatie is. * `voegBoekToe(titel: "Nieuw Boek", auteurId: 2)`: Dit is het mutatieveld. Meestal geef je de benodigde gegevens mee als **argumenten** (hier `titel` en `auteurId`). Let op: je gebruikt vaak het ID van een bestaande auteur, niet de naam. * `{ id titel publicatiejaar }`: Net als bij een query, specificeer je hier wat je **terug wilt krijgen** van het zojuist aangemaakte object. Dit is heel krachtig: in één verzoek stuur je de nieuwe data én vraag je meteen op hoe de server het heeft opgeslagen (bijv. het gegenereerde `id` en `publicatiejaar`). **Mogelijk response van de server (JSON):** ```json { "data": { "voegBoekToe": { "id": "104", "titel": "Nieuw Boek", "publicatiejaar": 2023 } } } ``` --- ### Voorbeeldcode (Node.js met Apollo Client) Hier is een heel basic codevoorbeeld hoe je bovenstaande query en mutatie zou kunnen uitvoeren in JavaScript met de populaire Apollo Client. **Eerst installeren:** ```bash npm install @apollo/client graphql ``` **Vervolgens gebruik je het zo:** ```javascript import { ApolloClient, InMemoryCache, gql } from '@apollo/client'; // Maak een connectie met je GraphQL server const client = new ApolloClient({ uri: 'https://jouw-api.nl/graphql', // Vervang dit door je eigen endpoint cache: new InMemoryCache(), }); // 1. DE QUERY UITVOEREN const BOEK_QUERY = gql` query { boek(id: 1) { titel auteur { naam } } } `; client.query({ query: BOEK_QUERY }) .then(result => console.log('Query result:', result.data)) .catch(error => console.error('Query error:', error)); // 2. DE MUTATIE UITVOEREN const VOEG_BOEK_TOE_MUTATION = gql` mutation { voegBoekToe(titel: "Nieuw Boek", auteurId: 2) { id titel } } `; client.mutate({ mutation: VOEG_BOEK_TOE_MUTATION }) .then(result => console.log('Mutatie gelukt!', result.data.voegBoekToe)) .catch(error => console.error('Mutatie error:', error)); ``` ### Samengevat om mee te beginnen: 1. **Query = Vragen**: Gebruik `query { ... }` en specificeer de velden die je wilt. 2. **Mutatie = Veranderen**: Gebruik `mutation { ... }`, geef de benodigde data mee als argumenten en vraag de nieuwe staat van het object op. 3. **Vraag precies wat je nodig hebt**: De kracht van GraphQL zit hem in het specificeren van de response structuur, waardoor je nooit te veel of te weinig data ontvangt. Hopelijk helpt dit je op weg! De volgende stap is het opzetten van een echte GraphQL server (bijv. met Apollo Server of Hasura) om deze queries en mutaties daadwerkelijk te kunnen uitvoeren.