iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

PWA, Severless, GraphQL實作系列 第 10

Gatsby.js 未來的網頁10:GraphQL Filter & Sort

  • 分享至 

  • xImage
  •  

上一篇中,我們完成了一個簡單的Index頁面。今天,我們再加一些功能:1)在文章中設定是否為草稿,若是,則index不顯示,這可以透過GraphQL的filter實現;2)為文章加入日期,讓index可以按日期以倒序排列文章,這可以透過GraphQL的sort實現。

Yes

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進行順序或倒序。

同步發表於: NodeJust.com


上一篇
Gatsby.js 未來的網頁09:Index頁面
系列文
PWA, Severless, GraphQL實作10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言