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

栏目: 前端 · 发布时间: 7年前

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

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

上一篇中,我们完成了一个简单的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进行顺序或倒序。

繁体


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据时代

大数据时代

[英] 维克托•迈尔•舍恩伯格(Viktor Mayer-Schönberger) / 周涛 / 浙江人民出版社 / 2012-12 / 49.90元

《大数据时代》是国外大数据研究的先河之作,本书作者维克托•迈尔•舍恩伯格被誉为“大数据商业应用第一人”,拥有在哈佛大学、牛津大学、耶鲁大学和新加坡国立大学等多个互联网研究重镇任教的经历,早在2010年就在《经济学人》上发布了长达14页对大数据应用的前瞻性研究。 维克托•迈尔•舍恩伯格在书中前瞻性地指出,大数据带来的信息风暴正在变革我们的生活、工作和思维,大数据开启了一次重大的时代转型,并用三......一起来看看 《大数据时代》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试