程式学徒

最新技术 未来网页

Gatsby.js 未来的网页10:GraphQL Filter & Sort

2018-10-24 ZackGatsby.js

Gatsby.js index

上一篇中,我们完成了一个简单的Index页面。今天,我们再加一些功能:1)在文章中设定是否为草稿,若是,则index不显示,这可以透过GraphQL的filter实现;2)为文章加入日期,让index可以按日期以倒序排列文章,这可以透过GraphQL的sort实现。

视频教学连结

Index列表

将连结列表改为ul显示

<ul>
{data.allMarkdownRemark.edges.map(post => (
  <li>
    <Link
      key={post.node.id} 
      to={post.node.frontmatter.path}>
      {post.node.frontmatter.title}
    </Link>
  </li>
))}
</ul>

增加frontmatter

为两篇blog文章加入新frontmatter:

---
path: '/blog-post-1'
title: 'My post'
draft: false
date: "2018-10-22"
---

GraphQL的filter和sort

修改首页的index.js当中的GraphQL查询,先加入前面新增的frontmatter(draft和date)。再在limit后之后加入filter和sort:

export const pageQuery = graphql`
  query IndexQuery {  
    allMarkdownRemark(
      limit: 10 
      filter: { frontmatter: { draft: { eq: false } } }
      sort: {fields: frontmatter___date order: DESC}
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            path
            draft
            date
          }
        }
      }
    }
  }
`

filter可以用条件限制查询内容。

sort可以根据fields加order进行顺序或倒序。

繁体