iT邦幫忙

第 11 屆 iThome 鐵人賽

1
Modern Web

用Gatsby.js做出一個簡單的部落格系列 第 17

Day17. 在Gatsby中串接第三方 GraphQL APIs

今天試著從我們的gatsby專案來串接我們的graphQL graphQL的API來獲得文章資料

首先,創建我們的gatsby專案

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-default

這邊我們使用了gatsby-starter-default這個最簡單的starter


甚麼是starter

starter就是gatsby開發的模板,你可以在這裡挑選自己喜歡的starter進行開發,裡面會包裝好一些js及css套件讓你方便進行開發。

創建完專案後,照Day1的作法,就能在開發者模式中,在localhost:8000運行自己的專案了


  • 為了用gatsby抓到我們部落格文章的資料,首先我們需要gatsby-source-graphql這個套件(gatsby提供了許多plugins去讓開發者轉換不同形式的資料源,舉凡GraphQL API、CMS、Markdown、或是圖片,都有相應的plugin能夠進行轉換或是處理)
npm install gatsby-source-graphql
  • 並且我們修改gatsby-config.js這支檔案,在plugins中加入:
{
      resolve: "gatsby-source-graphql",
      options: {
        // 這個名字會直接對應到我們GraphQL server的query type
        typeName: "BLOG",
        // 讀取時用的field名稱
        fieldName: "blog",
        // URL to query from
        url: "http://localhost:3000/graphql/",
 },

原理上,其實就是用post這個method,並且query這個key值的value去傳遞我們的查詢語法,大概是下面這種概念

method: post
url: http://localhost:3000/graphql/
data: {
  query: "這裡面就是我們用來查尋的graphQL語法"
}

此外,因為跨域請求的問題,我們還需要在rails專案中的,加入這行:

class GraphqlController < ApplicationController
+ protect_from_forgery with: :null_session
  def execute
    variables = ensure_hash(params[:variables])
    query = params[:query]
    operation_name = params[:operationName]
    ...
    ...

同時運行rails跟gatsby的server,在http://localhost:8000/graphql輸入查詢語法,我們應該能看到圖片中我們想得到的結果

https://ithelp.ithome.com.tw/upload/images/20191019/20111629oEbj4gf6Pb.png

我們可以發現blog這個field直接對應到我們graphQL api的query field。
遺憾的是,gatsby-source-graphql似乎無法提供我們mutation的語法,原因可能是在於gatsby在使用時機上,是定位在生成靜態頁面的時候獲取資料使用,所以只提供query field,因此可能需要使用Apollo Client來在需要時使用mutation部分的api,不過實際上,我們的目的也是想做出一個靜態的部落格網站,因此似乎也不需要用到mutation

現在,資料能抓到了,接下來我們希望用抓到的資料來生成頁面。
然而在此之前,我們先來做個頁面的樣式吧

計畫改變...


接著在Day18,我們會利用createPage這個gatsby提供的功能,來藉由抓到的資料產生文章頁面。

然而,比起用rails來架設資料庫,我們用gatsby來架設網站的最大的好處應該是能方便的從內容管理系統(英語:content management system,縮寫為CMS)來管理資料,這樣做的好處很多,首先,我們不必再為了一個很單純的部落格網站,來架設一個server以及資料庫,並且CMS提供了內容管理的功能,讓網站的所有者方便的去修改裡面的內容或發布新文章,那怕它連hello world都不會寫,也能輕鬆上手。

因此在Day19後,我們將從Contentful這個CMS出發,來完成我們的部落格功能。

官方參考: Using Third-party GraphQL APIs


上一篇
Day16. 實作GraphQL by Ruby on rails ( 修改mutation ) (六)
下一篇
Day18. 利用Gatsby通過資料創建頁面
系列文
用Gatsby.js做出一個簡單的部落格28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言