Question

如何在$category中将<div>用作<h2>$category</h2>？

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返回一个对象列表（而不是一个对象）。我可以从列表中的第一项中读取它，但想知道是否还有更好的方法。同样在某些情况下，列表可能为空，因此将不起作用。

Answer 1

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

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

Answer 2

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

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

2 个答案: