我可以将两个对象传递给 createPage 中的上下文吗?

我的博客将在每个帖子上显示作者的图片和姓名,并且要让模板加载正确的模板,我需要通过上下文传递一个值。问题是 $slug 已经是 gatsby-node 中 blogPage 函数的对象。


像这样的东西:


const path = require(`path`)

const _ = require("lodash")


exports.createPages = async ({ actions, graphql, reporter }) => {

  const { createPage } = actions


  const blogPostTemplate = path.resolve(`src/templates/blogPost.js`)

  const autorPageTemplate = path.resolve(`src/templates/autorPage.js`)

  const tagTemplate = path.resolve(`src/templates/tags.js`)

  const catTemplate = path.resolve(`src/templates/categories.js`)



  const result = await graphql(`

    {

      blogPost: allMarkdownRemark(

        filter: {

          frontmatter: {

            type: {

              eq: "blog-post"

            }

          }

        },

        sort: { 

          order: DESC, 

          fields: [

            frontmatter___date

          ] 

        },

        limit: 1000

      ) {

        edges {

          node {

            fields {

              slug

            }

          }

        }

      }

      autorPage: allMarkdownRemark(

        filter: {

          frontmatter: {

            type: {

              eq: "autor"

            }

          }

        }

      ) {

        edges {

          node {

            frontmatter {

              name

            }

          }

        }

      }

      tagsGroup: allMarkdownRemark(limit: 2000) {

        group(field: frontmatter___tags) {

          fieldValue

        }

      }

      categoriesGroup: allMarkdownRemark(limit: 2000) {

        group(field: frontmatter___categories) {

          fieldValue

        }

      }

    }

  `)


  // Handle errors

  if (result.errors) {

    reporter.panicOnBuild(`Error while running GraphQL query.`)

    return

  }


海绵宝宝撒
浏览 101回答 2
2回答

慕的地10843

您正在通过上下文正确传递变量,但您需要删除变量中的感叹号$author!(这意味着不可为空)。您的代码应如下所示:query($slug: String!, $autor: String) {    markdownRemark(fields: { slug: { eq: $slug }},       frontmatter: {         type: {           eq: "blog-post"          }         }       ) {      html      id      fields {        slug      }      frontmatter {        date(formatString: "DD MMMM YYYY")        path                title                categories                tags        featuredImage {          childImageSharp {            fluid(maxWidth: 1200) {              ...GatsbyImageSharpFluid            }          }        }                                     }    }    allMarkdownRemark(      filter: {        frontmatter: {type: {eq: $autor}}},       limit: 1    ) {    edges {      node {        html        excerpt(format: PLAIN, pruneLength: 200)        frontmatter {          name          avatar {            childImageSharp {              fluid {                ...GatsbyImageSharpFluid              }            }          }          slug          e_mail        }      }    }  }}您可以在此处查看有关 GraphQL 模式和类型的更多信息 。

ABOUTYOU

您在查询中缺少作者    query($slug: String!, $autor: String) {    markdownRemark(      fields: {         slug: {           eq: $slug         }       },       frontmatter: {         type: {           eq: "blog-post"          }         }       ) {      html      id      fields {        slug      }      frontmatter {        date(formatString: "DD MMMM YYYY")        path        title        categories        tags        featuredImage {          childImageSharp {            fluid(maxWidth: 1200) {              ...GatsbyImageSharpFluid            }          }        }                                     }    }    allMarkdownRemark(      filter: {        frontmatter: {          type: {            eq: "autor"           },        }      },       limit: 1    ) {    edges {      node {        html        excerpt(format: PLAIN, pruneLength: 200)        frontmatter {          name          avatar {            childImageSharp {              fluid {                ...GatsbyImageSharpFluid              }            }          }          slug          e_mail        }      }    }  }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript