我正在尝试声明一个变量以匹配在特定布尔字段上匹配 true 的 Contentful 帖子

Question

我已经用 gatsby 和 Contentful 建立了一个博客，并且在内容 posts 到 select 中有一个布尔字段，如果特定的 post 是“特色”或不是。我如何声明变量 featuredPost 以匹配将特色布尔值设置为 true 的 posts。请注意;在下面的代码中，我在声明中放置了????????突出显示 what/where 我的问题是指。非常感谢您的建议：

...

class BlogIndex extends React.Component {
  render() {
    const { data } = this.props
    const siteTitle = data.site.siteMetadata?.title || `Title`
    const posts = data.allContentfulPost.edges
    const featuredPost = ???????????

    return (
      <Layout location={this.props.location}>
        <SEO title="FieldPro Blog" keywords={[]} />
        <Header />
        <FeaturedPost>
          {featuredPost.map(({ node }) => {
            const title = node.title || node.slug
            return (
              <div key={node.slug}>
                <FeaturedImage>
                  <Link style={{ boxShadow: `none` }} to={node.slug}>
                    <Img className="Image" fluid={node.image.fluid} />
                  </Link>
                </FeaturedImage>
                <FeaturedText>
                  <FeaturedTitle>
                    <Link style={{ boxShadow: `none` }} to={node.slug}>
                      {title}
                    </Link>
                  </FeaturedTitle>
                  <Labels>
                    <Caption>{/* node.tags */}</Caption>
                  </Labels>
                </FeaturedText>
              </div>
            )
          })}
        </FeaturedPost>
        <PostGroup>
          {posts.map(({ node }) => {
            const title = node.title || node.slug
            return (
              <Post key={node.slug}>
                <PostImage>
                  <Link style={{ boxShadow: `none` }} to={node.slug}>
                    <Img className="Image" fluid={node.image.fluid} />
                  </Link>
                </PostImage>
                <PostText>
                  <Title>
                    <Link style={{ boxShadow: `none` }} to={node.slug}>
                      {title}
                    </Link>
                  </Title>
                  <Labels>
                    <Caption>{/* node.tags */}</Caption>
                  </Labels>
                </PostText>
              </Post>
            )
          })}
        </PostGroup>
      </Layout>
    )
  }
}

export default BlogIndex

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allContentfulPost(sort: { fields: createdAt, order: DESC }) {
      edges {
        node {
          title
          slug
          featured
          image {
            fluid {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`
...

Answer 1

您不能在循环外声明它，因为它是循环中每个元素的因变量。

您可以执行的一个内置选项是动态过滤您的 GraphQL 查询以仅获取精选帖子。您可以创建一个别名来获取两种类型的帖子：

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    featuredPosts: allContentfulPost(filter: { featured: { eq: "true" } }, sort: { fields: createdAt, order: DESC }) {
      edges {
        node {
          title
          slug
          featured
          image {
            fluid {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

注意：您需要为非特色帖子添加其他查询。

在这种情况下，您的数据将位于 props.data.featuredPosts。

正如我所说，另一种选择是在循环遍历每个元素时获取每个元素的特征属性：

<FeaturedPost>
  {featuredPost.map(({ node }) => {
    const title = node.title || node.slug;
    if(node.featured){
    return (
      <div key={node.slug}>
        <FeaturedImage>
          <Link style={{ boxShadow: `none` }} to={node.slug}>
            <Img className="Image" fluid={node.image.fluid} />
          </Link>
        </FeaturedImage>
        <FeaturedText>
          <FeaturedTitle>
            <Link style={{ boxShadow: `none` }} to={node.slug}>
              {title}
            </Link>
          </FeaturedTitle>
          <Labels>
            <Caption>{/* node.tags */}</Caption>
          </Labels>
        </FeaturedText>
      </div>
    )
    }
  })}
</FeaturedPost>

您的属性在 node.featured 内，每个元素可能不同，因此必须在循环内处理。

我正在尝试声明一个变量以匹配在特定布尔字段上匹配 true 的 Contentful 帖子

I am trying to declare a variable to match Contentful posts that match true on a particular boolean field

reactjs

contentful

graphql

gatsby

contentful-api