Gatsby 插件 Gatsby-Source-Wordpress 出错

Question

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

我让网站运行，但在我应该从 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 的选项需要...

Wordpress 站点的基本 URL，不带斜杠和协议。这是必需的。
示例：“gatsbyjsexamplewordpress.wordpress.com”或“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

嘿，您需要确保查询您拉入的帖子类型，您还需要确保那里有数据可以使用，但您的配置应该是这样的。

{
      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

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

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

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

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