React + Gatsby 静态查询 + GraphQL 中的条件渲染

Question

我想从 graphql 中仅选择精选帖子（3 个帖子），然后在我的博客页面中显示此内容，因此我将查询限制为仅三个结果，但如果我只有一个帖子，网站将失败。

因为，我使用静态查询来获取数据，在这种情况下，我应该在静态查询组件中使用 render 属性，并且我不能在属性上使用 if 块，并且当 graphql找不到其他帖子会失败。

代码如下：

featured-posts.js

import React from "react"
import MiniFeatured from "../components/minifeatured"
import { StaticQuery, Link, graphql } from "gatsby"

const Featured = () => {
    return (
        <StaticQuery
            query={graphql`
                query FeaturedBlogsport {
                    allMarkdownRemark (
                        limit: 3
                        sort: {order: DESC, fields: [frontmatter___date]}
                        filter: {frontmatter: {featured: {eq: true}}}
                    ) {
                        edges {
                            node {
                                frontmatter {
                                    title
                                    description
                                    post_image
                                }
                                fields {
                                    slug
                                }
                            }
                        }
                    }
                }               
            `}
            render={data => (
                <div className="mainBlogposts">
                    <div 
                        className="featuredBlogpost"
                        style={{backgroundImage: `url('${data.allMarkdownRemark.edges[0].node.frontmatter.post_image}')`}}    
                    >
                        <div className="featuredBlogpostContent">
                            <Link to={`https://strokequote.co/${data.allMarkdownRemark.edges[0].node.fields.slug}`}>
                                <h1 className="featuredBlogpostTitle">
                                    {data.allMarkdownRemark.edges[0].node.frontmatter.title}
                                </h1>
                                <h6 className="featuredBlogpostAuthor">
                                    {data.allMarkdownRemark.edges[0].node.frontmatter.description}
                                </h6>
                            </Link>
                        </div>
                    </div>
                    <div className="minifeaturedBlogpostsContainer">
                        <MiniFeatured
                            title={data.allMarkdownRemark.edges[1].node.frontmatter.title}
                            description={data.allMarkdownRemark.edges[1].node.frontmatter.description}
                            postImage={data.allMarkdownRemark.edges[1].node.frontmatter.post_image}
                            slug={data.allMarkdownRemark.edges[1].node.fields.slug}
                        />

                        <MiniFeatured
                            title={data.allMarkdownRemark.edges[2].node.frontmatter.title}
                            description={data.allMarkdownRemark.edges[2].node.frontmatter.description}
                            postImage={data.allMarkdownRemark.edges[2].node.frontmatter.post_image}
                            slug={data.allMarkdownRemark.edges[2].node.fields.slug}
                        />
                    </div>
                </div>
            )}
        />
    )
}

export default Featured

PDD。 Minifeatured 是其他组件中的次要特色帖子。 PDD 2.对不起我的英语，我还在学习

Answer 1

您为什么使用StaticQuery 来实现这一点？您可以通过使用常规 GraphQL 查询来简单地做到这一点，例如：

import { graphql, Link } from 'gatsby';
import React from 'react';

const Featured = ({ data }) => {
  return <div>
    {data.allMarkdownRemark.edges.map(({ node: post }) => {
      return <div className="mainBlogposts">
        <div className="featuredBlogpost"
             style={{ backgroundImage: `url(${post.frontmatter.post_image})` }}>
          <div className="featuredBlogpostContent">
            <Link to={`https://strokequote.co/${post.fields.slug}`}>
              <h1 className="featuredBlogpostTitle">
                {post.frontmatter.title}
              </h1>
              <h6 className="featuredBlogpostAuthor">
                {post.frontmatter.description}
              </h6>
            </Link>
          </div>
        </div>
      </div>;
    })}
  </div>;
};

export const AboutMeData = graphql`    
    query FeaturedBlogsport {
        allMarkdownRemark (
            limit: 3
            sort: {order: DESC, fields: [frontmatter___date]}
            filter: {frontmatter: {featured: {eq: true}}}
        ) {
            edges {
                node {
                    frontmatter {
                        title
                        description
                        post_image
                    }
                    fields {
                        slug
                    }
                }
            }
        }
    }
`;

我所做的只是获取所有 3 篇文章并使用您的 HTML 结构循环浏览它们。我使用{ node: post } 中的可迭代变量内部的解构将node 别名为post，但理想情况下，所有这些HTML 应该是另一个孤立的组件（它真的很大），你应该将post 作为@ 传递987654327@ 给他们，但现在，它会起作用。

上面的 sn-p 将简单地打印查询可以获取的帖子数量，无论是 1、2 还是 3。

此外，它比手动访问每个数组位置（[0]、[1] 等）更干净。

Answer 2

我相信 find 找到了解决方案。使用来自 gatsby 的 useStaticQuery，我可以执行以下操作：

const Featured = () => {
    const { edges } = FeaturedPostsQuery()
    return (
        <div className="mainBlogposts">
            <div 
                className="featuredBlogpost"
                style={{backgroundImage: `url('${edges[0].node.frontmatter.post_image}')`}}    
            >
                <div className="featuredBlogpostContent">
                    <Link to={`https://strokequote.co/${edges[0].node.fields.slug}`}>
                        <h1 className="featuredBlogpostTitle">
                            {edges[0].node.frontmatter.title}
                        </h1>
                        <h6 className="featuredBlogpostAuthor">
                            {edges[0].node.frontmatter.description}
                        </h6>
                    </Link>
                </div>
            </div>
            <div className="minifeaturedBlogpostsContainer">
                <MiniFeatured
                    title={edges[1].node.frontmatter.title}
                    description={edges[1].node.frontmatter.description}
                    postImage={edges[1].node.frontmatter.post_image}
                    slug={edges[1].node.fields.slug}
                />

                <MiniFeatured
                    title={edges[2].node.frontmatter.title}
                    description={edges[2].node.frontmatter.description}
                    postImage={edges[2].node.frontmatter.post_image}
                    slug={edges[2].node.fields.slug}
                />
            </div>
        </div>
    )
}

export default Featured

export const FeaturedPostsQuery = () => {
    const { allMarkdownRemark } = useStaticQuery(graphql`
        query FeaturedBlogsport {
            allMarkdownRemark (
                limit: 3
                sort: {order: DESC, fields: [frontmatter___date]}
                filter: {frontmatter: {featured: {eq: true}}}
            ) {
                edges {
                    node {
                        frontmatter {
                            title
                            description
                            post_image
                        }
                        fields {
                            slug
                        }
                    }
                }
            }
        }  
    `)

    return allMarkdownRemark
}