在 GatsbyJS/GraphQL 中组合页面查询

Posted

技术标签:

【中文标题】在 GatsbyJS/GraphQL 中组合页面查询【英文标题】:combining page queries in GatsbyJS/GraphQL 【发布时间】:2020-09-07 20:35:12 【问题描述】:

如何在 GraphQL 中合并两个页面查询?我尝试简单地将我需要的数据组合到一个查询中,但它一直给我一个错误“TypeError:无法读取未定义的属性'页面'”。我的想法是,要么我的查询没有正确完成,要么没有在我的 div 框中正确获取数据。

const IndexPage = (props) => 
  const  indexImage, wpgraphql  = props.data

  return (
    <Layout>
      <SEO title="Home" />
      <BackgroundImage
        className="masthead"
        fadeIn
        fluid=indexImage.childImageSharp.fluid
      >
        <div className="black-overlay">
          <div className="content-box">
            <h1>Her skriver jeg en overskrift</h1>
            <h2>This is my sub head</h2>
          </div>
        </div>
      </BackgroundImage>
      <div
        style=
          margin: `0 auto`,
          maxWidth: 1200,
          padding: `0 1.0875rem 1.45rem`,
        
      >
        <div class="wrapper">
          <div class="box a">
            wpgraphql.pages.nodes[0].undersideACFgraphql.mainText
          </div>
          <div class="box b">Her skriver jeg tekst 2 :D</div>
        </div>
      </div>
      <Link to="/page-2/">Gå til en anden side</Link>
    </Layout>
  )


export default IndexPage

export const query = graphql`
  query 
    indexImage: file(relativePath:  eq: "bolig-partner-ydelser.jpg" ) 
      childImageSharp 
        fluid(maxWidth: 1800) 
          ...GatsbyImageSharpFluid
        
      
    
    wpgraphql 
        pages 
          edges 
            node 
              undersideACFgraphql 
                mainText
              
            
          
        
      
  
`;

在 GraphiQL 中运行我的 wpgraphql 查询时,它工作得很好。这是 wpgraphql 查询:

query MyQuery 
  wpgraphql 
    pages(where: id: 91) 
      nodes 
        undersideACFgraphql 
          mainText
        
      
    
  

返回数据:


  "data": 
    "wpgraphql": 
      "pages": 
        "nodes": [
          
            "undersideACFgraphql": 
              "mainText": "Her kan jeg skrive min tekst til mit lille grid :D:D"
            
          
        ]
      
    
  

【问题讨论】:

【参考方案1】:

您收到错误的原因是您错误地访问了wpgraphql - 您应该使用props.data.wpgraphql.pages,但您正在使用props.wpgraphql.pages

另外,您对wpgraphlGraphQL 查询返回一个对象,其中pages.edges 是一个数组,因此您必须获取该数组中的第一个对象,如果这是您想要的,然后访问它是node.undersideACFgraphql.mainText属性。

const IndexPage = (props) => 
  const  indexImage, wpgraphql  = props.data

  return (
    <Layout>
      <SEO title="Home" />
      <BackgroundImage
        className="masthead"
        fadeIn
        fluid=indexImage.childImageSharp.fluid
      >
        <div className="black-overlay">
          <div className="content-box">
            <h1>Her skriver jeg en overskrift</h1>
            <h2>This is my sub head</h2>
          </div>
        </div>
      </BackgroundImage>
      <div
        style=
          margin: `0 auto`,
          maxWidth: 1200,
          padding: `0 1.0875rem 1.45rem`,
        
      >
        <div class="wrapper">
          <div class="box a">
            wpgraphql.pages.edges[0].node.undersideACFgraphql.mainText
          </div>
          <div class="box b">Her skriver jeg tekst 2 :D</div>
        </div>
      </div>
      <Link to="/page-2/">Gå til en anden side</Link>
    </Layout>
  )

【讨论】:

我试了一下并更新了有问题的代码。我可能会误解您的回答,因为现在它破坏了我的整个布局并且完全无法编译。 @TurboTobias 不确定我是否关注,当你 console.log(props.data) 时你会得到什么? console.log(props.data) 返回一个带有 indeximage 和 wpgraphql 的对象。截图:share.getcloudapp.com/9ZuEnL7r 我已尝试更新代码,但返回 TypeError:无法读取未定义的属性“0”。我已经更新了我的代码现在看起来如何的问题。 @TurboTobias 看到编辑,不确定你得到了什么,但屏幕截图很清楚。

以上是关于在 GatsbyJS/GraphQL 中组合页面查询的主要内容,如果未能解决你的问题,请参考以下文章

已解决 - GatsbyJS - GraphQL ACF 查询问题

win10 怎么查电脑配置

2017-6-2 Linq 高级查询 (分页和组合查)集合取交集

如何在JSP页面中实现对数据库的增删查改?

用PHP+mysql查询两个表,然后怎么样把已经查出来的两个数组合并在一起,两张表里有一个相同的字段

组合数据类型,英文词频统计