使用 Docker 建立 GraphQL API
GraphQL 本質只能算是 Middleware，因此也能如 Node + Express 般包進 Docker，本文將介紹使用 Babel 後 Apollo GraphQL 如何打包成 Docker Image。
タグ : GraphQL
Apollo GraphQL 與 Knex Where 精簡寫法
Knex 的 where 能接受 Object Literal，若配合 ECMAScript 2015 的 Property Shorthand，則有更精簡寫法。
使用 WebStorm 開發 GraphQL
WebStorm 基於 ECMAScript 生態系設計，支援 GraphQL 當然不在話下，只要安裝 JS GraphQL 就可完美支援 GraphQL。
如何在 Node 呼叫 GraphQL ?
雖然 GraphQL 主要是給前端使用，但有時在 Microservice 架構下，後端也會需要呼叫其他 Service 所提供 GraphQL，此時可在 Node 使用 graphql-request。
使用 Apollo GraphQL 建立 Subscription Filter
實務上可能不想接收所有 Subscription，而是只想訂閱有興趣內容，此時可如 Query 對 Subscription 傳入 Argument，Apollo GraphQL 將使用 Subscription Filter 處理。
使用 Apollo GraphQL 建立 Fragment
實務上可能會遇到多個 GraphQL Query 卻有相同的 Field，此時可將相同 Field 宣告成 Fragment 共用。
使用 Webpack Loader 將 GraphQL Query 獨立出來
雖然 Vue 允許我們在 ECMAScript 內以 String 定義 GraphQL Query，但實務上 Query 會相當複雜，比較好的方式是拆成獨立的 *.graphql 方便維護。
使用 Import GraphQL 將 Schema 獨立出來
雖然 Apollo GraphQL 允許我們在 ECMAScript 內以 String 定義 GraphQL Schema，但實務上 Schema 會相當龐大，比較好的方式是拆成獨立的 *.graphql 方便維護。
使用 Vue Apollo 建立 Simple Subscription
GraphQL Subscription 並不是一定得搭配 GraphQL Query，有時只想單純接收 Subscription 的回傳值，此時可使用 Vue Apollo 所提供的 Simple Subscription。
使用 Vue Apollo 建立 Dynamic Subscription
Smart Query 與 Smart Subscription 雖然方便，但必須在 apollo 先宣告 Query 也順便定義其 GraphQL，且在 Component 載入時自動執行；若想在某個 Event 下執行 GraphQL，則要改用 Dynamic Query 與 Dynamic Subscription 動態載入 GraphQL。
使用 Vue Apollo 建立 Smart Subscription
GraphQL Subscription 最常使用的場景為原本 Smart Query 已經有資料，但經過 Subscription 通知後需更新原本資料，Vue Apollo 特別設計了 Smart Subscription，可在完全不知道 WebSocket 前提下，不知不覺使用 GraphQL Subscription。
使用 Apollo Express 建立 Subscription
雖然 Apollo Server 就可建立 Subscription，但若要使用 Middleware，則必須改用 Apollo Server Express，其作法與原本 Apollo Server 有些不同。
使用 Apollo GraphQL 建立 Subscription
傳統若要實現 Browser 不用 Refresh 即時更新，會使用 WebSocket 實作，但 GraphQL Subscription 已經整合 WebSocket，只要使用類似 Query 語法，就能完成相同效果。
使用 Babel 打造 Apollo GraphQL 開發環境
Node 雖然支援大部分 ECMAScript 2015 語法，但更新的 ECMAScript 版本則不確定，且預設還是要使用 require() 與 CommonJS，若學 Frontend 使用 Babel，則 Apollo GraphQL 也能享受 ECMAScript 最新語法。
使用 Apollo GraphQL 連接 Redis
Node 只要安裝 Redis Client，就能存取 Redis，但其提供為 Callback-based API，要轉成 Promised-based API 後才方便在 Resolver 使用。
使用 GraphQL Query 回傳單一值
GraphQL Query 一般來說都會回傳 Array，但若要回傳 sum() 或 count() 結果則為單一 Scalar 值，這在 Apollo GraphQL 與 Knex 該如何實現呢 ?
使用 Apollo GraphQL 連接 MySQL
GraphQL 定位為 API Query Language，本質只是 Middleware 負責 Parse GraphQL，最終還是得搭配資料庫，本文以 Apollo GraphQL + Knex + MySQL 為例。
使用 Babel 打造 GraphQL Fullstack 開發環境
Vue CLI 已經基於 Babel 建立，但 Apollo GraphQL 則使用原生 Node，本文將以 Vue Apollo + Apollo GraphQL + Babel 打造 GraphQL Fullstack 開發環境。
如何使用 Apollo Server Express ?
除了 Apollo Server 外，Apollo 另外提供了 Apollo Server Express，可搭配 Express 與其他 Middleware 做進階應用。
使用 ESLint 檢查 GraphQL
只要在 Vue Project 下安裝 Vue Apollo 之後，yarn serve 就會提示是否讓 ESLint 也檢查 GraphQL，只要依照本文步驟，就能消除 Warning 並檢查 GraphQL。
如何更改 Apollo GraphQL 預設 Path ?
Apollo Server 預設 Path 為 / 以下任何目錄，而 Apollo Server Express 預設 Path 為 /graphql，若想讓 GraphQL API 為自訂 Path，如 /api 該如何設定呢 ?
使用 Skip Query 避免 Smart Query 一開始就執行
Vue Apollo 的 Smart Query 以 Declarative 本意很好，且不需 mounted hooks 就可自動執行，但若需求不希望 Component 一開始就執行 GraphQL 呢 ?
使用 Vue Apollo 建立 Reactive Parameter Query
實務上有時我們會將 GraphQL Query 的 Argument 綁定到 Vue 的 data，讓 data 一改變就自動重新執行 GraphQL Query，此時必須使用 Vue Apollo 所提供的 Reactive Parameter Query。
使用 Vue Apollo 建立 Dynamic Query
Vue Apollo 預設使用 Smart Query，在 apollo 先宣告 Query 也順便定義其 GraphQL，在 Component 載入時自動執行；若想在某個 Event 下執行 GraphQL，則要改用 Dynamic Query 動態載入 GraphQL。
如何將資料 Binding 到 GraphQL ?
Vue 在 HTML Template 的資料都會 Binding 到 data property 下，若想將該資料也 Binding 到 GraphQL 下該如何做呢 ?
使用 Vue Apollo 建立 Variable
GraphQL 的 Query 支援 Argument，而 Argument 在 Vue Apollo 亦可使用 Variable 提供。
GraphQL 初體驗
GraphQL 為 Facebook 所發表 API 查詢語言，在 2018 年成立 GraphQL Foundation 後，各語言的後端與前端都有 GraphQL 實作，本文將對 GraphQL 做簡單介紹，並以 Apollo 平台建立基本 GraphQL 開發環境。
使用 Apollo GraphQL 建立 Enumeration Type
ECMAScript 沒有 enum，而 Strongly Typed 的 GraphQL 則支援 enum，讓我們在 GraphQL Playground 可直接選擇 Enumeration 值使用，且還可檢查 Query 的 Argument 值是否正確。
如何更改 Apollo GraphQL 預設 Port ?
Apollo GraphQL 預設的 Port 為 4000，這也是很多 Server 所使用的 Port，我們該如何改變其預設 Port 呢 ?