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
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
Github repo: https://github.com/alexadark/gatsby-days
custom fields and CPT: https://bit.ly/2o6GJ5O
Slides: https://slides.com/alexandraspalato/gatsby-with-wordpress-and-wpgraphql-2/
twitter: @alexadark
FB: https://www.facebook.com/alexandra.spalato