Gatsby.js 未來的網頁08:GraphiQL

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

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

Gatsby.js 未來的網頁08:GraphiQL

GraphiQL

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

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

請嘗試輸入:

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

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

接著,再將allMarkdownRemark那行改為:

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

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

Gatsby.js系列全部文章

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

No comment yet, add your voice below!


Add a Comment

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

Comment *
Name *
Email *
Website

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