iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

PWA, Severless, GraphQL實作系列 第 8

[影片]Gatsby.js 未來的網頁08:GraphiQL

Gatsby提供了一個叫做 GraphiQL 的工具,幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面,讓我們可以直觀地看到查詢的結果,最後還能透過其Prettify功能對查詢進行美化,以便用於Gatsby當中。今天,我們就來了解一下這個GraphiQL工具。

YouTube Video:

Yes

GraphiQL

當你執行gatsby develop之後,除了本地網站的連結之外,Gatsby還為你提供了GraphiQL的連結:

http://localhost:8000/___graphql

點擊後便能在瀏覽器上看到GraphiQL的界面,左側為查詢輸入區,右側查詢結果。輸入完查詢後,點擊左上角的執行按鈕便能看到查詢結果。

請嘗試輸入:

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          path
        }
      }
    }
  }
}

這跟我們之前在templates/index.js當中使用的基本一樣。我們要找全部的Markdown文件,在edges當中的每一個node便是一份Markdown文件,裡面還有frontmatter和html(上面沒用到),frontmatter底下還有title和path。

按下執行後,你會看到我們的兩篇Markdown的內容。

接著,再將allMarkdownRemark那行改為:

allMarkdownRemark(limit: 1) {

其他保持不變,執行後,便會看到只有一篇文章的資料,這便是受到limit: 1的限制。

以後需要用到GraphQL的時候,就可以先在GraphiQL中測試一下,沒有問題後,按下左上方的Prettify,就能把查詢復制到Gatsby當中。

同步發表於:NodeJust


上一篇
[影片]Gatsby.js 未來的網頁07:自動生成文章
下一篇
Gatsby.js 未來的網頁09:Index頁面
系列文
PWA, Severless, GraphQL實作10

尚未有邦友留言

立即登入留言