Utiliser GraphQL avec l'API Fetch

Maintenant que notre serveur est prêt, nous allons regarder comment utiliser ce dernier avec JavaScript et notamment l'API fetch().

Si vous ne connaissez cette fonctionnalité JavaScript, je vous invite à lire ce cours : API Fetch.

Sélectionner tous les artistes

Le code JavaScript ci-dessous permet de sélectionner tous les artistes de notre base de données. Nous demandons que les prénoms des artistes ainsi que les titres des albums, mais les ID.

fetch('http://127.0.0.1:8000', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        query: `
                query selectArtists {
                    Artists {
                        firstname
                        albums {
                            title
                        }
                    }
                }`
    })
})
.then(res => res.json())
.then(results => console.log(results))
.catch(err => console.log(err))

Faites bien attention à envoyer les données en méthode POST.

Sélectionner un album

Pour la sélection d'un album, nous devons lui passer une variable qui sera transmise à notre query :

fetch('http://127.0.0.1:8000', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        query: `
                query selectAlbum($id: Int!) {
                    Album(id: $id) {
                        id
                        title
                    }
                }`,
        variables: {
            id: 3,
        }
    }),
})
.then(res => res.json())
.then(results => console.log(results))
.catch(err => console.log(err))

Insérer un artiste

L'insertion n'est pas énormément différente de la sélection d'un artiste, hormis qu'il ne s'agit pas d'une query, mais d'une mutation.

fetch('http://127.0.0.1:8000', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        query: `
                mutation createArtist($firstname: String!) {
                    createArtist(firstname: $firstname) {
                        content {
                            id
                            firstname
                        }
                    }
                }`,
        variables: {
            firstname: 'Jane Doe',
        }
    }),
})
.then(res => res.json())
.then(results => console.log(results))
.catch(err => console.log(err))

Template

Pour la sélection, les données doivent être envoyées au format texte dans un objet JSON.

JSON.stringify({
  query: `
    query SomeQuery {
      # your query here
    }`,
  variables: {},
});