在分组的graphql查询中访问Frontmatter元素

时间:2020-03-07 19:09:11

标签: graphql gatsby sharp

我试图从类别中最新文章的开头内返回FeaturedImage。

这是我当前编写的graphql查询:

query catList {
        allMdx(sort: { fields: frontmatter___date, order: DESC }) {
          group(field: frontmatter___themes, limit: 1) {
            fieldValue
            totalCount
            nodes {
              frontmatter {
                featuredImage {
                  childImageSharp {
                    fixed(width: 400, height: 400) {
                      ...GatsbyImageSharpFixed
                    }
                  }
                }
              }
            }
          }
        }
      }

查询返回的正是我在graphql编辑器中想要的内容,但是当我尝试访问组件中的featuredImage时,出现错误:

“ TypeError:无法读取未定义的属性'featuredImage'”

这是页面和组件的完整代码:

const CatPage = () => (
  <StaticQuery
    query={graphql`
      query themeList {
        allMdx(sort: { fields: frontmatter___date, order: DESC }) {
          group(field: frontmatter___themes, limit: 1) {
            fieldValue
            totalCount
            nodes {
              frontmatter {
                featuredImage {
                  childImageSharp {
                    fixed(width: 400, height: 400) {
                      ...GatsbyImageSharpFixed
                    }
                  }
                }
              }
            }
          }
        }
      }
    `}
    render={data => (
      <Layout>
        <Gallery>
          {data.allMdx.group.map(theme => (
            <GalleryCard to={theme.fieldValue} title={theme.fieldValue}>
              <Img
                fixed={
                  theme.nodes.frontmatter.featuredImage.childImageSharp.fixed
                }
              />
            </GalleryCard>
          ))}
        </Gallery>
      </Layout>
    )}
  />
)

这里的目标是使每个类别的最新帖子的特色图片成为该类别的封面图片,但是我很难获得要渲染的图片!

0 个答案:

没有答案