Как получить доступ к переменной GraphQL шаблона Gatsby Create Page внутри JSX?

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 :

Нет другого способа передачи переменных, страницы создаются на уровне узла gatsby. Ваша единственная опция - встроенные переменные, как я описал выше, либо в запросе страницы, либо в useStaticQuery. У нас есть планы заставить useQuery принимать переменные, но ETA отсутствует.

Answer 2

Вы можете получить доступ к category из свойства pageContext, как показано здесь: https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#pass-context-to-pages