Question

我们在gatsby-node.js中创建一个子节点。然后我们创建createPage

  const posts = result.data.allMarkdownRemark.edges
  posts.forEach(({ node: post }) => {
    createPage({
      path: `posts${post.fields.slug}`,
      component: PostTemplate,
      context: {
        slug: post.fields.slug,
        testingSomething: "this is a test",
      },
    })
  })

在模板中，我们运行类似的内容。

const PostTemplate = ({ data: post }) => {
  return ( ...)  }

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      ...
  }
`
export default PostTemplate

graphql怎么知道有？如果它的操作像this.props.pageContext.slug一样好，但是在平视之下发生了什么？

如何填充变量$slug？

Answer 1

要将变量添加到页面组件查询中，请在创建页面时在上下文对象中传递这些变量。

Query variables

const posts = result.data.allMarkdownRemark.edges
posts.forEach(({ node: post }) => {
  createPage({
    path: `posts${post.fields.slug}`,
    component: PostTemplate,
    context: {
      slug: post.fields.slug,
      testingSomething: "this is a test",
    },
  })
})

gatsby graphql查询中变量slug来自哪里？

1 个答案: