iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

PWA, Severless, GraphQL實作系列 第 9

Gatsby.js 未來的網頁09:Index頁面

  • 分享至 

  • xImage
  •  

上一篇中,我們用GraphiQL測試了GraphQL的查詢。今天,我們就要用這些查詢來打造一個Index頁面。

YouTube 影片

Yes

加入GraphQL

打開/pages/index.js,之前我們加入了Link,現在要使用GraphQL來取得資料,你可以參考/templates/post.js,兩者很類似,差別在於,post是取得單篇文章資料,而index是取得多篇文章資料:

export const pageQuery = graphql`
  query IndexQuery {  
    allMarkdownRemark(limit: 10) {
      edges {
        node {
          id
          frontmatter {
            title
            path
          }
        }
      }
    }
  }
`

其中id是自動產生的,用於Link連結,因為每個component都需要一個唯一的Key。

接著就可以將GraphQL取得的數據交給IndexPage使用,完全的index.js程式如下:

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const IndexPage = ({data}) => (
  <Layout>
    <h1>Hi guys</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
    <Link to="/page-3/">Go to page NEW</Link>

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

export const pageQuery = graphql`
  query IndexQuery {  
    allMarkdownRemark(limit: 10) {
      edges {
        node {
          id
          frontmatter {
            title
            path
          }
        }
      }
    }
  }
`

export default IndexPage

執行gatsby develop之後,便能在index頁面看到那兩篇文章的連結。


上一篇
[影片]Gatsby.js 未來的網頁08:GraphiQL
下一篇
Gatsby.js 未來的網頁10:GraphQL Filter & Sort
系列文
PWA, Severless, GraphQL實作10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言