Gatsby插件Gatsby-Source-Wordpress出现错误

时间:2019-08-02 08:55:55

标签: wordpress reactjs gatsby

我正在尝试建立我的第一个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`,
  ],
}

我被困住了,不知道现在该怎么办。我发现其他人遇到的问题与此类似,但是找不到任何好的答案或指导来找出我的问题。

谢谢!

4 个答案:

答案 0 :(得分: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,
      },
    },
  ],
}

答案 1 :(得分:0)

当从Godaddy之类的服务中获取托管资源时axios / node客户端可能会怀疑它们并拒绝https crt,我发现这已通过两种方式得到纠正

1)如果您有自己的服务器,可以添加第三方{例如https://ssl-ccp.godaddy.com/repository?origin=CALLISTO}到daddy crt软件包。因此,将其添加到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,

答案 2 :(得分:0)

嘿,您需要确保查询插入的帖子类型,还需要确保有要使用的数据,但这是您配置的样子。

SUM(IF([Qtr]='2018-Q1' OR [Qtr]='2018-Q2' OR [Qtr]='2018-Q3' OR [Qtr]='2018-Q4') 
 THEN FLOAT([Channel Mix]) END) /SUM(FLOAT([Revenue])

答案 3 :(得分:0)

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

  1. 可能是因为您使用的是更高版本的 gatsby,所以 gatsby-source-wordpress 插件的工作方式几乎没有变化

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

这个网站很有帮助。也去看看。