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 = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  createResolvers({
    WPGraphQL_MediaItem: {
      imageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: source.sourceUrl,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  })
}

We can now use Gatsby Image with WordPress images!

Image component

CREATE POSTS AND PAGES

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

My Talk in javascriptforwp conf where the process is more detailed

https://www.youtube.com/watch?v=zKSaj_JgXBk&t=75s

wpgraphql acf

Install required plugins

create custom fields

FLEXIBLE CONTENT

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

conclusion

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.

LINKS

Using WordPress as source for Gatsby

By Alexandra Spalato

Using WordPress as source for Gatsby

  • 647
Loading comments...

More from Alexandra Spalato