Я создал блог с Гэтсби и 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.
Вы не можете объявить его вне цикла, так как это зависимая переменная каждого элемента цикла.
Одна встроенная опция, которую вы можете сделать, — это фильтровать ваш запрос 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
и может отличаться для каждого элемента, поэтому должно обрабатываться внутри цикла.