如何在 JSX 中访问 Gatsby Create Page 模板 GraphQL 变量？答案

【问题标题】：How to access Gatsby Create Page template GraphQL variable inside JSX?如何在 JSX 中访问 Gatsby Create Page 模板 GraphQL 变量？
【发布时间】：2019-10-11 19:57:31
【问题描述】：

如何在<div> 中以<h2>$category</h2> 的身份访问和使用$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
    }
  }
`

请注意，在我的例子中，GraphQL 返回一个对象列表（而不是一个对象）。我可以从列表中的第一项中读取它，但想知道是否有更好的方法。同样在某些情况下，列表可能是空的，所以这不起作用。

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

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

没有其他方法可以传递变量，页面创建于 gatsby 节点级别。你唯一的选择是像我这样的内联变量如上所述，无论是在页面查询中还是在 useStaticQuery 中。我们有计划让 useQuery 接受变量，但没有 ETA。

【讨论】：

【解决方案2】：

您可以从pageContext 属性访问category，如下所示：https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#pass-context-to-pages

【讨论】：