昨天我們介紹了如何在 Gatsby 使用 GraphQL 來進行撈取資料，但在 Gatsby 中其實對於撈資料的方式是有區分的唷，我們昨天使用的叫做 頁面查詢 ( Page Query )，只是非常粗淺的示範如何使用，我們今天會較深度的去了解它是如何運作的。

昨天在實作撈資料之前，不知道各位讀者是否還記得，我們有先引入一段程式碼，程式碼的內容如下

import { graphql } from 'gatsby'

我們引入的這個 graphql ，它是如何工作的呢？

Graphql 是一個標記函數 ( Tagged Function )，對於這個名詞大家可能比較陌生，不過如果說 樣板字面值 大家可能會比較熟悉，也就是大家在 ES6 中常用的兩個反引號並將變數用 ${} 來包覆的寫法，就像下方程式碼所示

let name = Reynold;
console.log(`My name is ${name}`)

而樣板字面值的更高級形式就是標記模板 ( Tagged templates )，標籤 ( Tags ) 能讓你用函式的方式來解析樣板字面值，而函式的第一個參數帶入一個樣板字面值，其餘的參數就能帶入相關的表達式，所以我們能藉由這些參數來回傳經過處理後的字串，這就是標籤函式。

說了落落長，可能大家還是有看沒有懂，不知道筆者在公三小 XDDD
就讓我們用一段程式碼來示範吧

let person = 'Reynold';
let age = 27;

function myTag(strings, personExp, ageExp) {
  let str0 = strings[0]; // "這位"
  let str1 = strings[1]; // "是一位"

	let ageStr;
  if (ageExp > 99){
    ageStr = '耆老';
  } else {
    ageStr = '年輕人';
  }

  // 我們可以直接回傳樣板字面值
  return `${str0}${personExp}${str1}${ageStr}`;
}

let output = myTag`這位 ${ person } 是一位 ${ age }`;

// 這位 Reynold 是一位 年輕人
console.log(output);

不知道經過範例後，各位讀者有沒有稍微明白了一些呢？

如果還是覺得很模糊沒關係，筆者一樣會在參考資料中放上相關資料，有興趣的讀者可以自行去參閱哦，沒興趣的讀者只要知道 graphql 是藉由這樣的方式來處理即可。

所以簡單的說，就是在 Gatsby 建構的過程當中，會將 GraphQL 的 Query 從原始碼當中提取出來做解析。

而前面講了這麼一大串，其實就是要說，使用 頁面查詢 ( Page Query ) 我們可以帶入變數，使 query 更加的靈活，之後再建構網站時，我們會再特別抽出來作為示範。

明天我們會再來講解另一種撈取資料的方式，靜態查詢 ( Static Query )，它與頁面查詢使用的時機大不相同，剩下的，就讓我們明天繼續看下去囉！

參考資料

How does the graphql tag work?
Tagged templates