Gatsby 插件 Gatsby-Source-Wordpress 出错

Question

我正在尝试设置我的第一个 gatsby + wordpress 网站。我正在学习 this 教程。

我得到了站点运行ning，但是在我应该从 WP 获取数据的时候我卡住了。我添加了 Gatsby-Source-Wordpress 插件。在我重新启动网站后，它抛出了这个错误：

success open and validate gatsby-configs - 0.102 s
success load plugins - 0.631 s
success onPreInit - 0.019 s
success initialize cache - 0.053 s
success copy gatsby files - 0.161 s
success onPreBootstrap - 0.040 s
info Creating GraphQL type definition for File

Path: /wp-json
The server response was "404 Not Found"

 ERROR #11321  PLUGIN

"gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:

Cannot read property 'data' of undefined



  TypeError: Cannot read property 'data' of undefined

  - fetch.js:141 fetch
    [gatsby-wordpress]/[gatsby-source-wordpress]/fetch.js:141:21

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7


warn The gatsby-source-wordpress plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 0.327 s
success building schema - 0.404 s
success createPages - 0.019 s
success createPagesStatefully - 0.090 s
success onPreExtractQueries - 0.022 s
success update schema - 0.079 s
success extract queries from components - 0.595 s
success write out requires - 0.103 s
success write out redirect data - 0.032 s
success Build manifest and related icons - 0.263 s
success onPostBootstrap - 0.308 s
⠀
info bootstrap finished - 6.617 s
⠀
success run static queries - 0.105 s — 3/3 36.11 queries/second
success run page queries - 0.044 s — 5/5 230.97 queries/second
 DONE  Compiled successfully in 4851ms                                                           10:46:42 AM
⠀
You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use npm run build
⠀
ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.

我运行使用 Mamp 在本地 WP，我可以在此处看到 JSON 数据：http://localhost:8888/GatsbyWP/wp-json/。

这是我的 gatsby-config.js 文件：

module.exports = {
  siteMetadata: {
    title: `Gatsby wordpress test`,
    description: `Testing...`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `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`,
      },
    },
    {
      resolve: "gatsby-source-wordpress",
      options: {

        baseUrl: `localhost:8888`,

        protocol: `http`,

        hostingWPCOM: false,

        useACF: true,
      },
    },
    `gatsby-plugin-sitemap`,
  ],
}

我被卡住了，不知道现在该做什么。我发现其他人也有与此类似的问题，但没有找到任何好的答案或方向来尝试找出我的问题。

提前致谢！

Answer 1

gatsby-source-wordpress 的选项需要...

the base URL of the Wordpress site without the trailing slash and the protocol. This is required.
Example : 'gatsbyjsexamplewordpress.wordpress.com' or 'www.example-site.com'

module.exports = {
  siteMetadata: {
    title: `Gatsby wordpress test`,
    description: `Testing...`,
    author: `@gatsbyjs`,
  },
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: `localhost:8888/GatsbyWP`,
        protocol: `http`,
        hostingWPCOM: false,
        useACF: true,
      },
    },
  ],
}

Answer 2

当从像 Godaddy 这样的服务采购托管时 axios/node 客户可能会怀疑他们并拒绝 https crt，我已经看到这通过两种方式得到纠正

1) 添加第三方 go daddy crt 捆绑包，例如 https://ssl-ccp.godaddy.com/repository?origin=CALLISTO，如果您有自己的服务器，那很好。所以将其添加到 axios:

var agent = new https.Agent({ 
  ca: fs.readFileSync('ca.pem') 
});

axios.get(url, { agent: agent });

// 或

var instance = axios.create({ agent: agent });
instance.get(url);

或节点

export NODE_EXTRA_CA_CERTS=[your CA certificate file path]

2) 但是如果你在 Netlify 上或通过 gitlab 或其他方式托管怎么办，对我有用的是将我的 gatsby 配置协议更改为 http，这让我可以从我的网站很好，只要所有资产都是 https，即使我部署到我的 https 网站，它仍然有效。这让我难过了好几天，希望这对某人有帮助

 {
    resolve: `gatsby-source-wordpress`,
    options: {
      /*
       * The base URL of the WordPress site without the trailingslash and the protocol. This is required.
       * Example : 'dev-gatbsyjswp.pantheonsite.io' or 'www.example-site.com'
       */
      baseUrl: `example.com`,
      // The protocol. This can be http or https.
      protocol: `http`,
      // Indicates whether the site is hosted on wordpress.com.
      // If false, then the assumption is made that the site is self hosted.
      // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
      // If your site is hosted on wordpress.org, then set this to false.
      hostingWPCOM: false,

Answer 3

您好，您需要确保查询了您引入的 post 类型，并且您还需要确保那里有要使用的数据，但您的配置应该如下所示。

{
      resolve: `gatsby-source-wordpress`,
      options: {
        baseUrl: process.env.API_URL,

        protocol: process.env.API_PROTOCOL,

        hostingWPCOM: false,

        useACF: true,

        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
          "**/menus",
          "**/portfolio",
          "**/services",
          "**/qualifications",
          "**/gallery",
          "**/logo",
          "**/location",
        ],
      },
    },

Answer 4

如果以上所有推荐的解决方案都不能解决您的问题，这可能会对某人有所帮助。

可能是因为您使用的是更新版本的 gatsby，因此对 gatsby-source-wordpress 插件的工作方式进行了很小的改动

https://www.gatsbyjs.com/docs/how-to/sourcing-data/sourcing-from-wordpress/

这个网站很有帮助。也来看看吧。

Gatsby 插件 Gatsby-Source-Wordpress 出错

Error with Gatsby plugin Gatsby-Source-Wordpress

wordpress

reactjs

gatsby