Wordpress 在本地工作但不在部署的WP后端的特色\u media graphql查询

最近，我完成了Tom Phillips关于Udemy（）的一门课程，我能够完成这门课程，并且在我开始修改我个人投资组合的代码之前，它工作得很好。我在Digital Ocean上部署了一个WP后端，我的前端托管在Netlify上

我遇到的具体问题似乎是，没有为自定义post类型的“公文包”返回数据。部署日志说明如下：

> 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>

>为页面-5.032s生成静态HTML失败
>为路径“/portfolio/”生成静态HTML时出错
> 
>58 | style={{边距：“1rem”，最大宽度：“345”}
> 59 | 
>60{console.log（portfolioItem.node.featured_media.source_url）}
>    |                                                                
> 61 |                   
> 62 |                     
> 63 |                       
>WebPackageError:TypeError:无法读取null的属性“source\u url”
>
>-PortfolioItems.js:60
>src/components/portfolio/PortfolioItems.js:60:66
>
>-PortfolioItems.js:54
>src/components/portfolio/PortfolioItems.js:54:50
​>
> ────────────────────────────────────────────────────────────────
>“build.command”失败
> ────────────────────────────────────────────────────────────────
​>
>错误消息
>命令失败，退出代码为1:gatsby生成
​>
>错误定位
>来自Netlify应用程序的内置命令：
>盖茨比大厦
​
>解析配置
>建造：
>指挥部：盖茨比大厦
>commandOrigin:ui
>环境：
>-API_协议
>-API_URL
>-NODE_版本
>发布：/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>
      )}
    />

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

(
{props.allWordpressWpPortfolio.edges.map（portfolioItem=>(
{console.log（portfolioItem.node.featured_media.source_url）}
{portfolioItem.node.title}
阅读更多。。。
))}
)}
/>

由于当WP站点使用本地应用程序托管在localhost上时，它在本地工作，因此我假设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
php\u值上传\u最大\u文件大小128M
php_值post_最大尺寸128M
php_值内存_限制256M
php_值最大执行时间300
php_值最大输入时间300
重新启动发动机
重写规则。*-[E=HTTP\U授权：%{HTTP:AUTHORIZATION}]
重写基/
重写规则^index\.php$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/index.php[L]
#结束WordPress

---

如果您还需要Wordpress配置，请告诉我。我不确定还有什么与这个问题相关。根据您的

staticQuery

，wp admin设置在我的本地本地主机版本和部署的版本中是相同的：

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

以及

console.log

的外观：

    <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>
      )}
    />

 {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>
      })
    })

render={（数据）=>{
data.allWordpressWpPortfolio.edges.node（portfolioItem=>{
log（“您的节点映像是”，portfolioItem.featured\u media.source\u url）
返回标题为{portfolioItem.title}
})
})

---

或者，检查两个环境的节点版本，并尝试使依赖项版本相等。在将其推送到Netlify之前，请尝试在本地构建它。

您是否可以将完整组件放在使用

staticQuery

的位置（不是它的一部分，因为它丢失了上下文）谢谢@FerranBuireu我已经用完整的StaticQuery标记编辑了这个问题。如前所述，这在本地非常有效，但不在部署的站点上，所以我的直觉是这是一个WP配置错误，而不是react语法错误，但请让我知道这是否有帮助。再次感谢！只需使用远程WP尝试本地gatsby？…此post/CPT根本不起作用你有一张特色图片吗？你没有在Ferran中测试这种可能性。静态查询的结构很好。在我的开发环境中，整个应用程序按预期工作（在repo根目录中运行gatsby develop服务于我的前端到8000，本地在端口3000上运行我的WP后端）。只有在前端部署到netlify且WP部署到Digital Ocean后，才会出现此问题。请检查两种环境的节点版本