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

Question

我们在gatsby-node.js 中创建slug 节点。然后我们创建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",
    },
  })
})