GatsbyJS: StatiscQuery 从当前页面传入数据

Question

我正在尝试在 GatsbyJS 中以编程方式创建页面。我为我的页面模板制作了一个 herotext 组件。我遇到的问题是静态查询似乎不支持 graphql 变量。如何从我的 GraphQL 查询中的页面获取数据？

我的 GraphQL 查询：

query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
        }

变量id: { eq: $id })好像一点作用都没有。我注意到有一个获取 currentPage 的查询，但不太确定我是否可以使用它？

query MyQuery {
  wpPage(ACFundersider: {hero: {heroText: {}}}) {
    allWpPage {
      pageInfo {
        currentPage
      }
    }
  }
}

我的组件与 StaticQuery 看起来像这样：

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default function HeroText() {
  return (
    <StaticQuery
      query={graphql`
        query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
        }
      `}
      render={data => <h2>{data.wpPage.ACFundersider.hero.heroHeading}</h2>}
    />
  )
}

Answer 1

您可以通过节点或边访问您的查询吗？如果你正在使用节点，你可以尝试做这样的事情：

import React from "react"
import { StaticQuery, graphql } from "gatsby"

const query = graphql`
        query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
         }
`

export default function HeroText() {
    const data = useStaticQuery(query)
    const { wpPage: { nodes: pages }, } = data
    return (
        <div>
            {
                pages.map(page => {
                    return (
                        <h2>page.ACFundersider.hero.heroHeading</h2>
                    )
                })
            }
        </div>
)}

不确定这个确切的代码是否适合您（您可能需要稍微调整一下）。

Answer 2

staticQuery（或 useStaticQuery 钩子）不接受参数（因此得名，静态），如您在 Gatsby docs 中所见。你的方法永远行不通。

要使用您的 HeroById 查询，您需要使用上下文将 id 传递给页面并使用 page query 而不是静态查询。您的完整代码应如下所示：

import * as React from 'react'
import { graphql } from 'gatsby'

const SomeTemplate= ({data}) => {
  console.log("your data is", data);
  return (
    <div>
     Some content
    </div>
  )
}

export const query = graphql`
        query HeroById($id: String) {
          wpPage(id: { eq: $id }) {
            ACFundersider {
              hero {
                heroText
                heroHeading
              }
            }
            id
          }
        }
      `

export default SomeTemplate

检查 localhost:8000/___graphql 游乐场中的 GraphQL 查询，以确保您的 HeroById 在按 id 过滤时查询 returns 内容（尝试对 id 进行硬编码如果可以的话）。

GatsbyJS: StatiscQuery 从当前页面传入数据

GatsbyJS: StatiscQuery pass in data from current page

reactjs

graphql

gatsby