WHO am i?

Alexandra Spalato | @alexadark

Freelance web developer and entrepreneur

WordPress Expert and contractor at https://codeable.io/

Now focusing on Gatsby and JavaScript in general

Using wordpress as source for gatsby

benefits of using WordPress as source for gatsby

Using ACF (Advanced Custom Fields) WordPress plugin with the WPGraphQl-ACF plugin, and explore the power of Flexible content to build a custom builder





Building a site with  WordPress, Gatsby and Wpgraphql

Benefits of using wordpress

Flexible and powerfull




Open Source

WordPress back-office is easy and intuitive to use



WordPress is 34% of all websites



WHY WPgraphql

The gatsby-source-wordpress plugin is only a wrapper around the REST API 

WPGraphQl brings the power of GraphQL to WordPress

Easily expose both default and custom data in WordPress


A lot FASTER compared to the REST API.


 Let's make a huge query of 100 posts with the  REST API here

And now Look at how quickly the data loads with GraphQL here 

install and config

create a config file

This is where we will place the wordpress URL

 * @type {{wordPressUrl: string}}
const config = {
  wordPressUrl: `http://localhost/gatsby-days/,

module.exports = config

Place this file at the root of your project

Install gatsby-source-graphql

$ yarn add gatsby-source-graphql

In the console...

In gatsby-config.js file

Let's look into the explorer

Creating and using custom post types

Install required plugins

Downloading the images from wordpress in order to use them with gatsby-image

$ yarn add gatsby-source-filesystem
const { createRemoteFileNode } = require("gatsby-source-filesystem")

exports.createResolvers = ({
}) => {
  const { createNode } = actions
    WPGraphQL_MediaItem: {
      imageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: source.sourceUrl,

We can now use Gatsby Image with WordPress images!

Image component


These are the links to the repo files to create posts and pages

My Talk in javascriptforwp conf where the process is more detailed


wpgraphql acf

Install required plugins

create custom fields


Example of an advanced back-office

Creating Flexible Content Fields

Array of multiple possible types

In the explorer

we get an array of possible types which are the possibles layouts from our flexible content

we're going to use a fragment to say which fields we want

with the fragment we tell graphql: if at execution time the data is this typename  I want these fields back, if it's this other typename I want this other fields etc...


query fields 

live demo


Pairing Gatsby and WordPress and connecting them through WPGraphQl is ground breaking as it brings all of the blazingly fast & optimized features of Gatsby and the easy &intuitive CMS capabilities of WordPress together.


Using WordPress as source for Gatsby

By Alexandra Spalato

Using WordPress as source for Gatsby

  • 2,724