I chanced on it while considering an alternative to Wordpress and was glad i didnt have to loose the simple and easy drag-drop builders.
I've been facing a challenge with my first deploy and it's becoming frustrating.
Here Below is my gatsby-config.js
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
/**
* First up is the WordPress source plugin that connects Gatsby
* to your WordPress site.
*
* visit the plugin docs to learn more
* https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/README.md
*
*/
resolve: `gatsby-source-wordpress`,
options: {
// This type will contain remote schema Query type
//typeName: `WPGraphQL`,
// This is field under which it's accessible
//fieldName: `wpgraphql`,
// Url to query from
// the only required plugin option for WordPress is the GraphQL url.
url:
process.env.WPGRAPHQL_URL || `https://decognizantconsult.com/graphql`,
verbose: true,
},
},
/*{
resolve: `gatsby-source-graphql`,
options: {
// This type will contain remote schema Query type
typeName: `WPGraphQL`,
// This is field under which it's accessible
fieldName: `wpgraphql`,
// Url to query from
url: process.env.WPGRAPHQL_URL ||
`https://www.decognizantconsult.com/graphql.`,
},
},*/
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}Then That of my gatsby-node.js below:
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.com/docs/node-apis/
*/
// You can delete this file if you're not using it
// gatsby-node.js
const createPages = require("./create/createPages")
const createPosts = require("./create/createPosts")
//const createUsers = require("./utils/createUsers")
//const createCategories = require("./utils/createCategories")
//const createTags = require("./utils/createTags")
exports.createPagesStatefully = async ({ graphql, actions, reporter }, options) => {
await createPages({ actions, graphql, reporter }, options)
await createPosts({ actions, graphql, reporter }, options)
//await createUsers({ actions, graphql, reporter }, options)
//await createCategories({ actions, graphql, reporter }, options)
//await crateTags({ actions, graphql, reporter }, options)
}Inside the createPost.js file i have the following:
// create/createPosts.js
const {
PostTemplateFragment,
BlogPreviewFragment,
} = require("../src/templates/posts/data.js")
//const postTemplate = require.resolve(`../src/templates/posts/single.js`)
//const blogTemplate = require.resolve(`../src/templates/posts/archive.js`)
const { blogURI } = require("../globals")
const postTemplate = require.resolve("../src/templates/posts/index.js")
const blogTemplate = require.resolve("../src/templates/posts/blog.js")
const GET_POSTS = `
# Here we make use of the imported fragments which are referenced above
${PostTemplateFragment}
${BlogPreviewFragment}
query GET_POSTS($first:Int $after:String) {
wpgraphql {
posts(
first: $first
after: $after
# This will make sure to only get the parent nodes and no children
where: {
parent: null
}
) {
pageInfo {
hasNextPage
endCursor
}
nodes {
uri
# This is the fragment used for the Post Template
...PostTemplateFragment
#This is the fragment used for the blog preview on archive pages
...BlogPreviewFragment
}
}
}
}
`
const allPosts = []
const blogPages = [];
let pageNumber = 0;
const itemsPerPage = 10;
/**
* This is the export which Gatbsy will use to process.
*
* @param { actions, graphql }
* @returns {Promise<void>}
*/
module.exports = async ({ actions, graphql, reporter }, options) => {
/**
* This is the method from Gatsby that we're going
* to use to create posts in our static site.
*/
const { createPage } = actions
/**
* Fetch posts method. This accepts variables to alter
* the query. The variable `first` controls how many items to
* request per fetch and the `after` controls where to start in
* the dataset.
*
* @param variables
* @returns {Promise<*>}
*/
const fetchPosts = async (variables) =>
/**
* Fetch posts using the GET_POSTS query and the variables passed in.
*/
await graphql(GET_POSTS, variables).then(({ data }) => {
/**
* Extract the data from the GraphQL query results
*/
const {
wpgraphql: {
posts: {
nodes,
pageInfo: { hasNextPage, endCursor },
},
},
} = data
/**
* Define the path for the paginated blog page.
* This is the url the page will live at
* @type {string}
*/
const blogPagePath = !variables.after
? `${blogURI}/`
: `${blogURI}/page/${pageNumber + 1}`
/**
* Add config for the blogPage to the blogPage array
* for creating later
*
* @type {{
* path: string,
* component: string,
* context: {nodes: *, pageNumber: number, hasNextPage: *}
* }}
*/
blogPages[pageNumber] = {
path: blogPagePath,
component: blogTemplate,
context: {
nodes,
pageNumber: pageNumber + 1,
hasNextPage,
itemsPerPage,
allPosts,
},
}
/**
* Map over the posts for later creation
*/
nodes
&& nodes.map((posts) => {
allPosts.push(posts)
})
/**
* If there's another post, fetch more
* so we can have all the data we need.
*/
if (hasNextPage) {
pageNumber++
reporter.info(`fetch post ${pageNumber} of posts...`)
return fetchPosts({ first: itemsPerPage, after: endCursor })
}
/**
* Once we're done, return all the posts
* so we can create the necessary posts with
* all the data on hand.
*/
return allPosts
})
/**
* Kick off our `fetchPosts` method which will get us all
* the posts we need to create individual posts.
*/
await fetchPosts({ first: itemsPerPage, after: null }).then((wpPosts) => {
wpPosts && wpPosts.map((post) => {
/**
* Build post path based of theme blogURI setting.
*/
const path = `${blogURI}${post.uri}`
createPage({
path: path,
component: postTemplate,
context: {
post: post,
},
})
reporter.info(`post created: ${path}`)
})
reporter.info(`# -----> POSTS TOTAL: ${wpPosts.length}`)
/**
* Map over the `blogPages` array to create the
* paginated blog pages
*/
blogPages
&& blogPages.map((blogPage) => {
if (blogPage.context.pageNumber === 1) {
blogPage.context.publisher = true;
blogPage.context.label = blogPage.path.replace('/', '');
}
createPage(blogPage);
reporter.info(`created blog archive page ${blogPage.context.pageNumber}`);
});
})
}Initially i was running my deploy without the gatsby-source-wordpress plugin then i will hit an error at the const GET_POST block in createPost.js with the response "Cannot query field "wpgraphql" on type "Query"."
So i changed the query field to graphql but that didnt work either to i resorted to installing the gatsby-source-wordpress plugin hoping it would make a good fix but now i get an error that says
"There was a problem loading plugin "gatsby-source-wordpress". Perhaps you need to install its package?"
I'm not sure if this would be due to some plugin incompatibilities and would appreciate some guidance as to how to fix this.
Please see below the Raw Logs from the Deploy action
Please see the link to the package-lock.json file:
