Reactjs 如何在JSX中访问Gatsby创建页面模板GraphQL变量？

如何在

中访问和使用

$category

作为

$category

从“React”导入React
从“盖茨比”导入{graphql}
从“./组件/布局”导入布局
导出默认值（{data}）=>{
const posts=data.posts
返回(
员额清单
)
}
export const query=graphql`
查询（$category:String！）{
帖子（{category:{name:$category}}）{
总结
}
}
`

---

请注意，在我的例子中，GraphQL返回一个对象列表（而不是一个对象）。我可以从列表中的第一项开始阅读，但不知道是否有更好的方法。此外，在某些情况下，列表可能为空，因此这将不起作用。

目前，您不能在GraphQL查询中使用变量。问题在于，这些GraphQL查询是在Gatsby构建过程中在实例化任何变量之前提取的。见此：

没有其他方法可以传递变量，页面是在 盖茨比节点级。您唯一的选择是像I这样的内联变量 如上所述，在页面查询或useStaticQuery中。我们有 计划让useQuery接受变量，但没有ETA

---

您可以从属性

pageContext

访问

category

，如下所示：

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default ({ data }) => {
  const posts = data.posts
  return (
    <Layout>
      <div>
        <h1>List of Posts</h1>
      </div>
    </Layout>
  )
}
export const query = graphql`
  query($category: String!) {
    posts( { category: { name: $category} }) {
      summary
    }
  }
`