# Gatsby GraphQL正確打開方式

### (ㄧ) 假設我的文章檔案是markdown檔

想要利用query方式取得資料的話：

1. src新增projects資料夾
2. projects資料夾中新增幾個.md文章
3. 每個.md文章的結構先在最上方補上識別資訊：

---
title: Gatsby React專案開發日記
stack: React.js + CSS
slug: the-react-js
---

## h2

p...（你的內文）

4. 到以下連結查看安裝gatsby-transformer-remark方式：
Gatsby官網：https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/?=transformer

5. 開啟新終端機

npm install gatsby-transformer-remark

6. 除了npm安裝外，還需要在gatsby-config.js檔案中新增plugin，（以字串方式新增即可）

plugins: [
    'gatsby-transformer-remark',
]

7. 只要在gatsby-config.js有更動欲看到刷新結果，需要control+c結束，再重新gatsby develop啟動刷新才會看到新的結果。

9. 在http://localhost:8000/___graphql 中可以透過左欄看見allMarkDownRemark> nodes> 勾選html formatter裡的slug, stack, title（即你剛剛新增的辨識標籤）按下播放鍵就可以在右欄看見回傳的資料

*甲：勾選完後看見的結構：

query MyQuery {
  allMarkdownRemark {
    nodes {
      html
      frontmatter {
        stack
        title
      }
    }
  }
}

*乙：Query後確認回傳的結構：

{
  "data": {
    "allMarkdownRemark": {
      "nodes": [
        {
          "html": "<h2>專案初始化</h2>\n<p>gatsby 適合靜態網頁部署</p>",
          "frontmatter": {
            "stack": "React.js + CSS",
            "title": "Gatsby React專案開發日記"
          }
        }
      ]
    }
  },
  "extensions": {}
}

//記住這個『data』，等等就是拿來解構的結構

接下來想要fetch取得資料的話：

1. 打開需要的模板，例如project.js引入gatsby內建的graphql及Link元件

import { graphql, Link } from "gatsby"

建立一個query變數

export const query = graphql``

//最後是樣板字面值

2. 將剛剛甲結構複製進樣板字面值中：

export const query = graphql`
query ProjectsPage {
  allMarkdownRemark {
    nodes {
      frontmatter {
        stack
        title
        slug
      }
      id
    }
  }
}`