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

摘要： 上一篇中，我們完成了一個簡單的Index頁面。今天，我們再加一些功能：1）在文章中設定是否為草稿，若是，則index不顯示，這可以透過GraphQL的filter實現；2）為文章加入日期，讓index可以按日期以倒序排列文章，這可以透過GraphQL的sort實現。 視訊教學連結...

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

視訊教學連結

• ofollow,noindex" target="_blank">YouTube
• B站
• 微博
• 騰訊

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

繁體