1

GraphQLで2つのページクエリを組み合わせるにはどうすればよいですか? 必要なデータを 1 つのクエリに単純に結合しようとしましたが、「TypeError: 未定義のプロパティ 'pages' を読み取れません」というエラーが表示され続けます。私の考えでは、クエリが単に正しく行われていないか、ボックスの 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"
            }
          }
        ]
      }
    }
  }
}
4

1 に答える 1

0

エラーが発生する理由は、wpgraphql間違ってアクセスしているためです。使用する必要がありますが、実行しprops.data.wpgraphql.pagesていますprops.wpgraphql.pages。

また、GraphQLクエリは配列でwpgraphlあるオブジェクトを返す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>
  )
}
于 2020-05-21T10:38:55.127 に答える