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

Question

我最近完成了Tom Phillips在Udemy (https://www.udemy.com/share/101XRSAEEedF5aQH4D/)上的一门课程，我能够完成这门课程，直到我开始为我自己的个人投资组合修改代码之前，它一直工作得很好。我有一个WP后端部署在Digital Ocean上，我的前端托管在netflix上。

我遇到的具体问题似乎是，没有为"portfolio"的自定义帖子类型返回数据。部署日志声明如下:

> 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
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网站使用应用程序Local托管在本地主机上时，它在本地工作，我假设在数字海洋上的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)}

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

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版本并尝试相等的依赖版本。在推送到netflix之前，尝试在本地构建它。