Gatsby 入門篇

最近咱們組在作項目的重構工做，重構的時候採用了全新的技術方案，最大的變化就是技術選型的時候server端使用的是 GraphQL + apollo，用GraphQL代替了傳統的restful風格的先後端數據處理前端

GATSBY一款友好支持gql 的前端頁面生成器node

看一下對於Gatsby的基本解釋:mysql

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and appsreact

能夠理解Gatsby 是一個靜態頁面生成工具，它容許使用React做爲渲染引擎來搭建一個靜態站點ios

目前比較知名的使用GatsbyJS 的站點就是 react官網git

安裝

經過Gatsby-cli 腳手架能夠直接生產一個靜態站點，github

測試的時候發現，必需要求本地node版本號 12+web

一個基本的框架生成以後是這個樣子sql

GATSBY 的插件功能

GATSBY 擁有不少的插件axios

能夠幫助咱們實現很是豐富的功能，好比以後的demo，編譯markdown文件，還有在別人的文章中看到能夠在頁面中添加離線地圖應用等等

這裏講一個op中有使用的插件

gatsby-plugin-page-creator
複製代碼

gatsby中默認將 pages 做爲路由映射文件，只要在pages中的文件均可以被映射爲一個路由頁面

那若是想要變動這個規則，就能夠藉助這個插件來處理

後面這個參數能夠用來規避這種映射規則，若是你的組件不想做爲路由展現，那麼就能夠在這裏配置一下

支持請求

Gatsby 天然是支持咱們經常使用的 RESTful API 風格

經過例子能夠看到，也可使用咱們經常使用的這種數據請求，拿到數據作後續處理

const axios = require("axios")

const get = endpoint => axios.get(`https://pokeapi.co/api/v2${endpoint}`)

const getPokemonData = names => Promise.all(names.map(async name => {
  const {data: pokemon} = await get(`/pokemon/${name}`)
  return {
    ...pokemon
  }
}))

複製代碼

可是Gatsby 更推薦咱們使用 gql 去處理數據，甚至是靜態資源的讀取，好比咱們看一下關於站點內靜態圖片的展現【 gatsby-blog 】去展現一個圖片都是經過gql訪問的方式

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}
複製代碼

這種圖片的處理咱們也能夠按照以往的require方式去實現

src={fixUrl(item.avatar)}
複製代碼

可是gatsby是建議咱們去遵循同一套開發風格

這種理念能夠說是一種開發規範或者說約定吧，但願能夠統一開發者的風格

那這種方案對於團隊開發來講比較好，統一的風格有利於以後項目的管理與開發，若是是我的站定的搭建就怎麼簡單怎麼實現了

頁面生成

Gatsby支持2種頁面生成的方式

1 Gatsby內置自動將src / pages中的React組件生成路由的頁面,這個也是咱們如今後臺重構時候採用的方式
2 gatsby-node.js 中經過 createPage.函數生成

經過這裏例子能夠看到咱們能夠拿到數據後動態生成頁面

createPage({
    path: `/pokemon`,
    component: require.resolve("./src/templates/pokemon.js"),
    context: {
      allPokemon
    }
  })

複製代碼

構建demo

而後咱們來寫一個demo來感覺一下 gatsby 的實際開發

demo的目標能夠看作是博客內容展現

Demo ：文章列表頁面 + 詳情頁面

基本邏輯：讀取markdown 數據，展現頁面

過程很是簡單：

1 首先咱們中配置兩個插件

gatsby-source-filesystem

gatsby-transformer-remark
複製代碼

Filesystem 是讀取文件資源

remark幫助解析markdown數據

2 template中建立模塊文件

3 而後咱們在gatsby-node.js 中配置動態頁面的渲染

// 生成一個markdown 目錄文件
  const markdownData = result.data.allMarkdownRemark.edges
  const articles = markdownData.map(({ node }) => node.frontmatter)

// 首頁列表渲染 - 備註因爲 GATSBY 首先讀取配置 在走默認設置 因此page文件夾須要調整 否則就會讀取pages下的文件做爲首頁了
  createPage({
    path: '/',
    component: path.resolve(`src/templates/index.js`),
    context: {
      articles
    }
  })

  // markdown 遍歷生成單獨的文章頁面
  result
    .data
    .allMarkdownRemark
    .edges
    .forEach(({node}) => {
      createPage({
        path: node.frontmatter.path,
        component: path.resolve(`src/templates/post.js`)
      })
    })
複製代碼

createPage 函數中path 是指定到頁面展現的路由，component 是你使用的模板引擎，context 是須要傳遞給模板須要渲染的數據

列表頁面所需的，頭像、時間等參數都是在markdown文件中寫入的

---
title: 畫個龍
date: 2019-08-10
path: /rainbow
author: mk
cover: https://www.lxybaike.com/uploads/201907/1562575542zU2C2i60.jpg
---
我是mk文件 我是mk文件 我是mk文件 
複製代碼

以上就完成了一個簡單的列表展現功能

項目實戰

數據請求

按照以前的restful風格。接口分爲get與post類型，對應gql中可理解爲

get -> Query

post -》 Mutation

const { loading, error, data } = useQuery(GET_TODOS)

const [updateTodo] = useMutation(UPDATE_TODO)
複製代碼

按鈕操做後更新頁面數據能夠經過4種方式實現

1 接口中返回變動的結果，根據id會查詢到緩存，會自動更識符，用來做爲從新獲取對象或者緩存的key —- 因此返回的數據列表中不能夠有重複id出現

說到這個想起以前，因爲mysql表中使用id + order 做爲了聯合主鍵，請求返回的數據有相同的id，致使寫入緩存數據出錯

2 在 update 中主動重寫 cache （這個是目前比較經常使用的一個， readquery && writequery ）【 mutation 】

3 使用 refetch 直接從新發起一次請求【 query 】

4 文檔中還有一種, fetchmore 在舉例分頁操做的時候可使用，不過嘗試了下這種方法，這個要配合 updatequery 函數操做

，不如使用 setxxx 去變動 variables 【 query 】

安裝