Я пытаюсь объявить переменную для соответствия содержательным сообщениям, которые соответствуют истине в определенном логическом поле

Я создал блог с Гэтсби и Contentful, и у меня есть логическое поле в содержательных сообщениях, чтобы выбрать, является ли конкретный пост «популярным» или нет. Как я могу объявить переменную FeaturedPost, чтобы она соответствовала сообщениям, для которых логическое логическое значение установлено как true. ПОЖАЛУЙСТА, ОБРАТИ ВНИМАНИЕ; в приведенном ниже коде в объявлении я поставил ???????? чтобы выделить, к чему/где относится мой вопрос. Буду очень признателен за ваш совет:

...

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
            }
          }
        }
      }
    }
  }
`
...

🤔 А знаете ли вы, что...
React DevTools - это расширение для браузера, облегчающее отладку приложений React.


310
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 и может отличаться для каждого элемента, поэтому должно обрабатываться внутри цикла.