Mika A.

Integrate GraphQL with Wordpress

July 27, 2018

GraphQL is a very powerful query language that minimizes calls from a client to a server. Since Wordpress is one of the most used publications tools, it can be interesting to use it with GraphQL.

Provide a GraphQL endpoint in Wordpress

The principle of GraphQL is to provide an endpoint on which we will make a call to retrieve data. For Wordpress to provide this, I installed wp-graphql. To install it, download the latest version of the plugin from https://github.com/wp-graphql/wp-graphql/releases and upload the file into the Wordpress dashboard. After activating the plugin, make sure that it works by opening the URL https: // ADDRESSDUSITEWORDPRESS/graphql._ An error message similar to the following screenshot should then appear.

Retrieve some data

We will now try to make requests to retrieve data from the Wordpress site. For that, I use Insomnia which offers very nice features to work with GraphQL, just to mention autocompletion or  automatic indentation. I create a new query in Insomnia and I the GraphQL endpoint as URL. I then select GraphQL as data type sent by Insomnia and I start editing the contents of the query. Here is the example of a query that retrieves the last 10 articles with their URL and their featured images:

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

Voila, we can now use GraphQL to retrieve data from a Wordpress site.


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