问题描述
我在考虑替代 wordpress 时偶然发现了它，很高兴我不必放弃简单易用的拖放构建器。
我在第一次部署时遇到了挑战，而且越来越令人沮丧。
下面是我的 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`,],}然后是我下面的 gatsby-node.js：
/**
* 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,options)
await createPosts({ actions,options)
//await createusers({ actions,options)
//await createCategories({ actions,options)
//await crateTags({ actions,options)
}// 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,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}`);
});
})
}最初我在没有 gatsby-source-wordpress 插件的情况下运行我的部署，然后我将在 createPost.js 中的 const GET_POST 块中遇到错误，并在类型“查询”上响应“无法查询字段”wpgraphql。“
所以我将查询字段更改为 graphql 但这也没有用
“加载插件“gatsby-source-wordpress”时出现问题。也许您需要安装它的包？”
我不确定这是否是由于某些插件不兼容造成的，希望得到一些有关如何解决此问题的指导。
请查看下方来自部署操作的原始日志
请查看 package-lock.json 文件的链接：
解决方法
根据：
"There was a problem loading plugin "gatsby-source-wordpress". Perhaps you need to install its package?"
并且提供的 package.json，您没有安装 gatsby-source-wordpress 依赖项...这意味着 Gatsby 在发现时无法理解您的代码和查询：
resolve: `gatsby-source-wordpress`,只需安装依赖项：
npm install gatsby-source-wordpress // or yarn add gatsby-source-wordpress