Question

我最近在 Udemy (https://www.udemy.com/share/101XRSAEEedF5aQH4D/) 上完成了 Tom Phillips 的一门课程，并且我能够完成该课程并且一直运行良好，直到我开始为我自己的个人作品集修改代码。我在 Digital Ocean 上部署了一个 WP 后端，而我的前端托管在 Netlify 上。

我遇到的具体问题似乎是没有为“作品集”的自定义帖子类型返回数据部署日志声明如下：

> failed Building static HTML for pages - 5.032s
> error Building static HTML failed for path "/portfolio/"
> 
> 58 |                   style={{ margin: "1rem", maxWidth: "345" }}
> 59 | 
> 60 |                   {console.log(portfolioItem.node.featured_media.source_url)}
>    |                                                                
> 61 |                   <ImageWrapper>
> 62 |                     <FeaturedImage>
> 63 |                       <CardMedia
>
> WebpackError: TypeError: Cannot read property 'source_url' of null
>
> - PortfolioItems.js:60 
> src/components/portfolio/PortfolioItems.js:60:66
>
> - PortfolioItems.js:54
> src/components/portfolio/PortfolioItems.js:54:50
>
> ────────────────────────────────────────────────────────────────
> "build.command" failed                                        
> ────────────────────────────────────────────────────────────────
>
> Error message
> Command failed with exit code 1: gatsby build
>
> Error location
> In Build command from Netlify app:
> gatsby build

> Resolved config
> build:
> command: gatsby build
> commandOrigin: ui
> environment:
> - API_PROTOCOL
> - API_URL
> - NODE_VERSION
> publish: /opt/build/repo/public>

StaticQuery 看起来像：

    <StaticQuery
      query={graphql`
        {
          allWordpressWpPortfolio {
            edges {
              node {
                excerpt
                content
                title
                slug
                featured_media {
                  source_url
                }
              }
            }
          }
        }
      `}
      render={props => (
        <PortfolioItemsWrapper>
          <Grid
            container
            // direction="column"
            justify="center"
            alignItems="center"
          >
            {props.allWordpressWpPortfolio.edges.map(portfolioItem => (
              <Grid item xs={12} md={6}>
                <Card
                  key={portfolioItem.node.id}
                  style={{ margin: "1rem", maxWidth: "345" }}
                >
                  {console.log(portfolioItem.node.featured_media.source_url)}
                  <ImageWrapper>
                    <FeaturedImage>
                      <CardMedia
                        style={{ maxWidth: "100%" }}
                        image={portfolioItem.node.featured_media.source_url}
                        title="Thumbnail"
                        component="img"
                      />
                    </FeaturedImage>
                  </ImageWrapper>
                  <h2>{portfolioItem.node.title}</h2>

                  <div
                    dangerouslySetInnerHTML={{
                      __html: portfolioItem.node.excerpt,
                    }}
                  />
                  <Link to={`/portfolio/${portfolioItem.node.slug}`}>
                    Read more...
                  </Link>
                </Card>
              </Grid>
            ))}
          </Grid>
        </PortfolioItemsWrapper>
      )}
    />

因为当 WP 站点使用本地应用程序托管在本地主机上时它在本地工作，所以我假设我在 Digital Ocean 上的 WP 配置中有一些东西阻止访问，但我不熟悉 PHP 并且无法找到错误。我的 .htaccess 文件如下所示：


    # BEGIN WordPress
    php_value upload_max_filesize 128M
    php_value post_max_size 128M
    php_value memory_limit 256M
    php_value max_execution_time 300
    php_value max_input_time 300
    
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    # END WordPress

如果您需要从 Wordpress 配置中获得更多信息，请告诉我。我不确定还有什么与该问题相关。 wp-admin 设置在我的本地本地主机版本和部署版本中是相同的

Answer 1

根据您的staticQuery：

     query={graphq` {
      allWordpressWpPortfolio {
        edges {
          node {
            excerpt
            content
            title
            slug
            featured_media {
              source_url
            }
          }
        }
      }
    }
  `}

以及 console.log 的样子：

 {console.log(portfolioItem.node.featured_media.source_url)}

在我看来，您没有遍历正确的对象。获得数据后，render 的 staticQuery 方法应如下所示：

    render={(data) => {
      data.allWordpressWpPortfolio.edges.node(portfolioItem =>{
          console.log("Your node image is", portfolioItem.featured_media.source_url)
          return <div>The title is {portfolioItem.title}</div>
      })
    })

或者，检查两个环境的 Node 版本并尝试匹配依赖版本。在将其推送到 Netlify 之前尝试在本地构建它。

features_media graphql 查询在本地工作但不在部署的 WP 后端

1 个答案: