Gatsby 从页面模板查询 createPage 上下文选项答案

【问题标题】：Gatsby Query createPage context options from page templateGatsby 从页面模板查询 createPage 上下文选项
【发布时间】：2019-07-07 14:21:34
【问题描述】：

我正在尝试通过 props 或 graphql 查询我在 Gatsby 的 createPage 函数中的 context 选项中测试的键值对。见代码：

 createPage({
        path: node.frontmatter.path,
        component: blogPostTemplate,
        context: {
          mycontext: "My Context James",
        }, // additional data can be passed via context
      })

我的页面查询如下：

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }
`

如何查询上下文以及 html 和 frontmatter 节点？

非常感谢

【问题讨论】：

标签： gatsby

【解决方案1】：

Pass context to pages。如有疑问，请查看文档。

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

const Page = ({ data, pageContext }) => {
  return (
    <>
      <p>Context: { pageContext.mycontext }<p>
      <p>Title: { data.markdownRemark.frontmatter.title }<p>
    </>
  )
}

export default Page

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }
`

【讨论】：