Gatsby.js 未來的網頁08：GraphiQL
摘要：
Gatsby提供了一個叫做 GraphiQL 的工具，幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個視覺化介面，讓我們可以直觀地看到查詢的結果，最後還能透過其Prettify功能對查詢進行美化，以便用於Gatsby當中。今天，我們就來了解一下這個GraphiQL工...
Gatsby提供了一個叫做 GraphiQL 的工具，幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個視覺化介面，讓我們可以直觀地看到查詢的結果，最後還能透過其Prettify功能對查詢進行美化，以便用於Gatsby當中。今天，我們就來了解一下這個GraphiQL工具。
視訊教學連結
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當中。