WORDPRESS-GATSBY 部署失败

Posted 2023-03-08

【中文标题】WORDPRESS-GATSBY 部署失败

【英文标题】：WORDPRESS-GATSBY DEPLOY FAILS

【发布时间】：2021-05-27 20:57:57

【问题描述】：

我在考虑替代 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, 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)
 

在 createPost.js 文件中，我有以下内容：

// 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`);
    );
  )

最初我在没有 gatsby-source-wordpress 插件的情况下运行我的部署，然后我会在 createPost.js 中的 const GET_POST 块中遇到错误，响应为“无法查询字段”wpgraphql“类型“查询”。”

所以我将查询字段更改为 graphql，但这也没有用，我求助于安装 gatsby-source-wordpress 插件，希望它能很好地解决问题，但现在我收到一个错误提示

“加载插件“gatsby-source-wordpress”时出现问题。也许你需要安装它的包？”

我不确定这是否是由于某些插件不兼容造成的，希望得到一些关于如何解决此问题的指导。

请参阅下面来自部署操作的原始日志

请查看package-lock.json文件的链接：

【问题讨论】：

你能分享你的package.json吗？

嗨@FerranBuireu 请我已将链接添加到 package-lock.json 文件。谢谢

【参考方案1】：

根据：

"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