Mika A.

Intégrer GraphQL avec Wordpress

July 27, 2018

GraphQL est un language de requête très puissant permettant de minimiser les appels depuis un client vers un serveur. Wordpress étant un des outils de publications les plus utilisés, il peut être intéressant de l’utiliser avec GraphQL.

Fournir un endpoint GraphQL dans Wordpress

Le principe de GraphQL est de fournir un endpoint sur lequel on va faire un appel pour récupérer des données. Pour que Wordpress puisse fournir cela, j’ai installé wp-graphql. Pour l’installer, il faut télécharger la dernière version du plugin sur https://github.com/wp-graphql/wp-graphql/releases et téléverser le fichier dans le tableau de bord de Wordpress. Après avoir activé le plugin, il faut s’assurer qu’il fonctionne en ouvrant l’URL https://ADRESSE\_DU\_SITE\_WORDPRESS/graphql. Un message d’erreur similaire au suivant devrait alors apparaitre.

Récupérer quelques données

Nous allons maintenant essayer de faire des requetes pour récupérer des données sur le site Wordpress. Pour cela, j’utilise Insomnia qui offre des fonctionnalités très sympa pour travailler avec GraphQL, notament l’autocomplétion ou l’identation automatique des requetes. Je crée ainsi une nouvelle requête dans Insomnia et je met en URL l’endpoint de GraphQL. Je séléctionne ensuite GraphQL comme type de donnée envoyé par Insomnia et je commence à éditer le contenu de la requete. Voici par exemple une requête qui permet de récupérer les 10 derniers articles avec leur URL et une image à la une:

{
  posts(first: 10) {
    nodes {
      title
      featuredImage {
    sourceUrl
      }
      link
    }
  }
}

Et  voilà, nous pouvons maintenant utiliser GraphQL pour récupérer des données depuis un site Wordpress.


Written by @mikaoelitiana who lives and works in Paris, building useful things with React, Typescript and more.Follow me on Twitter or Github