GatsbyJS / GraphQL 简单博客答案

【问题标题】：GatsbyJS / GraphQL simple blogGatsbyJS / GraphQL 简单博客
【发布时间】：2020-07-30 17:28:21
【问题描述】：

我正在使用内容丰富的 GatsbyJS 构建一个简单的博客。我有一个博客页面，其中列出了所有带有标题和日期的帖子。我想为最后一篇文章添加文章的第一行和文章中使用的图像。

...

import React from 'react'
import Layout from '../components/layout'
import { Link, graphql, useStaticQuery } from 'gatsby'
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"

import blogStyles from './blog.module.scss'
import Head from '../components/head'

import TransitionLink from "gatsby-plugin-transition-link"
import AniLink from "gatsby-plugin-transition-link/AniLink"

const BlogPage = () => {
    const data = useStaticQuery(graphql`
    query{
         allContentfulBlogPost (sort: { fields: publishedDate, order: DESC}){
             edges{
                 node{
                     title
                     slug
                     publishedDate(formatString:"MMMM Do, YYYY")
                 }
             }
         }

    }
`)

    return (
        <Layout>
            <Head title = "Post" />
            <h1>Post</h1>

            <ol data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease" 
            className={blogStyles.posts}>
                {data.allContentfulBlogPost.edges.map((edge) => {
                    return (
                    <li className={blogStyles.post}>
                        <Link to={`/blog/${edge.node.slug}`}>
                            <h2>{edge.node.title}</h2>
                            <p>{edge.node.publishedDate }</p>
                        </Link>
                    </li>
                )
                })}
            </ol>
        </Layout>
    )
}

export default BlogPage

【问题讨论】：

标签： graphql gatsby blogs contentful

【解决方案1】：

注意：我假设您的意思是 latest 帖子，而不是 last 帖子。

您可以使用Aliases 将您的查询分成两部分。

latestArticle 有一个limit: 1 并查询文章第一行和文章中使用的图像（以及title, slugExt, publishDate）所需的额外字段。

allOtherArticles 有一个skip: 1 并且只查询title, slugExt, publishDate。

const BlogPage = () => {
  const { latestArticle, allOtherArticles } = useStaticQuery(graphql`
    query MyQuery {
      latestArticle: allContentfulBlogPost(sort: {order: DESC, fields: publishDate}, limit: 1) {
        nodes {
          title
          slug
          publishDate
          excerpt {
            excerpt
          }
          thumbnailImage {
            imageFile {
              id
              fluid {
                ...GatsbyContentfulFluid
              }
            }
          }
        }
      }
      allOtherArticles: allContentfulBlogPost(sort: {order: DESC, fields: publishDate}, skip: 1) {
        nodes {
          title
          slug
          publishDate
        }
      }
    }
  `)

  const latest = latestArticle.edges[0].node

  return (
    <Layout>
      <ol data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease" className={blogStyles.posts}>
        <li className="latest-post">
          <Link to={`/blog/${latest.slug}`}>
            <h2>{latest.title}</h2>
            <p>{latest.excerpt.excerpt}</p>
            <Img fluid={latest.thumbnailImage.imageFile.fluid} />
          </Link>
        </li>
        {allOtherArticles.edges.map((edge) => {
          return (
            <li className={blogStyles.post}>
              <Link to={`/blog/${edge.node.slug}`}>
                <h2>{edge.node.title}</h2>
                <p>{edge.node.publishedDate }</p>
              </Link>
            </li>
          )
        })}
      </ol>
    </Layout>
  )
}

export default BlogPage

另一种选择是只查询您需要的所有字段。当您映射数据时，您可以检查索引并有条件地呈现缩略图和摘录（以及其他内容）。

{data.allContentfulBlogPost.edges.map((edge, index) => {
  const firstArticle = index === 0

  return (
    <li className={ blogStyles.post }>
      <Link to={ `/blog/${edge.node.slug }`}>
        { firstArticle && (<Img fluid={edge.node.thumbnailImage.imageFile.fluid } />)}
        <h2>{ edge.node.title }</h2>
        { firstArticle && (<p>{ edge.node.title }</p>)}
        <p>{ edge.node.publishedDate }</p>
      </Link>
    </li>
  )
})}

【讨论】：