私はギャツビーにこのページがあります:
import React from 'react'
import Link from 'gatsby-link'
import IntroPartial from '../partials/themes/intro'
export default class ThemeTemplate extends React.Component {
render(){
const theme = this.props.pathContext.theme
console.dir(this.data)
return (
<div>
<h1>{theme.name}</h1>
<IntroPartial theme={theme} />
</div>
)
}
}
export const pageQuery = graphql`
query ThemeQuery($theme: String){
allMarkdownRemark(
filter: { frontmatter: { themes: { in: [$theme] } } }
){
edges{
node{
frontmatter{
title
themes
}
html
}
}
}
}
`
このクエリは、私が$theme
にオプションを指定した場合、GraphQLテスターで正常に機能します。 $theme
の値を提供するにはどうすればよいですか? this.props.pathContext.theme.slug
に設定します。
ドキュメントは、いくつかの変数がうまく機能することを示唆しているようですが、私は自分の変数を追加する方法がわかりません。
Graphqlに渡される変数は createPage からのものです。これは通常、gatsby-nodeファイルで呼び出されます。必要に応じて、例ではパスが$ pathとして使用されることがよくあります。
独自の追加変数を含めてgraphql呼び出しに渡すには、それらをコンテキストに追加する必要があります。ドキュメントから例を少し変更する:
createPage({
path: `/my-sweet-new-page/`,
component: path.resolve(`./src/templates/my-sweet-new-page.js`),
// The context is passed as props to the component as well
// as into the component's GraphQL query.
context: {
theme: `name of your theme`,
},
})
次に、例のようにクエリで$ themeを使用できます。上記のコードで$ themeを設定すると、 createPages の部分(例を参照)で行われます。これにより、すべてのデータにアクセスできるようになります。