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

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

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

YouTube 影片

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

加入GraphQL

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

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

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

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

本文參與iT邦幫忙鐵人賽簡體

No comment yet, add your voice below!


Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料