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

Question

We create the slug node in gatsby-node.js . Then we create the 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",
      },
    })
  })

In the template we run something like this.

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

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

How does graphql know that there's a slug? If it did something like this.props.pageContext.slug fine, but what's going on under the hud?

How does the variable $slug get populated?

Answer 1

To add variables to page component queries, pass these in the context object when creating pages.

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",
    },
  })
})