web-dev-qa-db-ja.com

変数をpageQueryに渡す方法

私はギャツビーにこのページがあります：

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に設定します。

ドキュメントは、いくつかの変数がうまく機能することを示唆しているようですが、私は自分の変数を追加する方法がわかりません。

gatsby
16
Arcath

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 の部分（例を参照）で行われます。これにより、すべてのデータにアクセスできるようになります。

24
Mark Michon