source code: https://medium.com/@koei1025/%E5%A6%82%E4%BD%95%E7%94%A8graphql%E7%B5%B1%E6%B2%BB%E5%85%A8%E4%B8%96%E7%95%8Cpart-1-source-code-5a3225e79395

1. 如何用GraphQL統治全世界
Part 1

2. 你是邪惡組織九頭蛇的新進IT工程師

3. 九頭蛇想統治全世界
但阻礙在前面的正是可惡的復仇者聯盟

4. 要打擊復仇者聯盟，最優先的就是情報
首領想調查美國隊長的基本資料跟交友圈

6. • 首領想知道復仇者聯盟中的美國隊長
• 真實姓名叫什麼？
• 幾歲？
• 哪裡人？
• 電話？
• Email？
• 在哪裡工作？
• 有哪些朋友？
你覺得這些問題好像是家裡父母在調查女兒男朋友一樣

7. 你的前輩提供了Rest API給首領進行查詢
1. 他得先查出復仇者聯盟有哪些成員
http://www.hydra.com/avengers
2. 然後在查出美國隊長的資料
http://www.hydra.com/avengers/1
3. 在繼續查出美國隊長的朋友有誰
http://www.hydra.com/avengers/1/friends

8. 首領每秒幾十億上下，簡單的情報要分三次查詢
幾聲槍響後，首領恭喜你晉升資深工程師
但你不解決這個問題，很快又要晉升其他人了

9. 你打算要用GraphQL來保住小命

10. 安裝graphql gem
• 在Gemfile中
• gem 'graphql', '1.7.9’
• bundle install
• 安裝graphql-ruby
• rails generate graphql:install
• 建立graphql相關程式與檔案夾
1.8.x有大幅變革，與1.7.x
語法不合

11. 5分鐘建立第一個GraphQL API
1. 建立Model：Avenger
2. 寫入Avenger基本資料
3. 建立Avenger Object type
4. 修改Query schema
5. 在graphiql進行測試
Source Code：https://goo.gl/Zzgw5K

13. GraphQL
• 於2012年由Facebook開發，2015年公布，2018年11月7日移轉給
新成立的GraphQL基金會
• GraphQL有三種root type
• Query：查詢
• Mutation：新增、修改、刪除
• Subscription：訂閱

14. Object Type & Field
Types::AvengerType = GraphQL::ObjectType.define do
name ”Object Type Name"
field :field_name1, !types.String, property: “”, description: “”
field :field_name2, -> { types[Object Type] }
end
• AvengerType：ObjectType Class
• name：graphql object type name
• field：可以進行操作的字段
• field_name：可以是別名或是真實名稱
• type：可以使用scalar type或object type
• property：真實物件的名稱
• description：field的說明，會出現在graphql doc中

15. Field Type
• Scalar Type
• ID
• String
• Int
• Float
• Boolean
• Object Type

16. ！的用途
• 帶！表示不可以是空
• 意義與資料庫設計中的nullable屬性相同
• 在查詢時：表示回傳值不可以是空，若要回傳的值是空
的，則會回傳錯誤訊息（"message": "Cannot return null
for non-nullable field object_type.field_name"）
• 在傳參時：表示傳入值不可以是空

17. GraphQL GUI工具
Graphiql
• 免費
• 功能陽春，已夠用
• Facebook開發，GraphQL自帶
• 執行graphql:install時就會自行
安裝到Gemfile裡
• 本地端：支援http header
https://github.com/skevy/graphi
ql-app/releases/tag/v0.7.2
GraphQL Playground
• 免費
• 同Graphiql，可自訂Http header的功能
• Prisma開發
• 網頁版：https://www.graphqlbin.com
• 本地端：
https://github.com/prisma/graphql-
playground/releases

18. 當然還是可以用傳統工具來使用GraphQL
• Rest API使用不同的HTTP action來代表不同的行為
• Get：查詢/讀取
• Put：更新
• Post：新增
• Delete：刪除
• GraphQL API通常只使用Post來對資料進行操作
• 原因很簡單，因為Post可以夾帶message-body
• 所以一樣可以用Postman或cURL之類的工具來測試GraphQL
• 只是有美美的UI、提示語法、自動格式美化、還自帶文件的Graphiql
• 何苦為難自己？

19. 首領試用後並不滿意，每次查詢都會出現
所有復仇者聯盟的成員，光一個美國隊長
就夠難搞了，還全隊出動

20. 在首領按下手槍上的扳機前
你大喊：等一下，給我1分鐘，查詢功能馬上好

21. 實現查詢功能: argument
1. 增加argument，並指定名稱與類型
2. 實現查詢功能
3. 在graphiql進行測試

23. argument
• Object Type都可以包含0~N個參數
• 每個參數都必須命名
• 可以指定是否必要輸入
• 可以指定預設值

24. 為了避免小命再度不保，在報告首領前，
你決定在多做一點

25. 實現動態查詢: Query variables
1. 宣告operation name與variables，variable必須以$開頭
2. 置入variable，替換原本hardcode的查詢條件
3. 以JSON格式編寫要帶入的variable
4. 在graphiql進行測試

27. 首領使用後沒說什麼，只表示想要知道復
仇者的交友圈查詢功能多久會好

28. 使用GraphQL顯示關連資料
1. 建立AvengerFriend Model
2. 建立關連
3. 寫入資料
4. 新增friends object type
5. 在graphiql進行測試

30. GraphQL的關連
• 有關係就沒關係
• 沒關係就有關係
• 真沒關係就硬拉關係

31. 有關係就沒關係
• 有很明確的從屬關係，像是作家與作品
• 只要Model之間的關連有拉起來，GraphQL幾乎不用做什麼
• has_one
• has_many
你 Facebook的PO文
1 1~N

32. 沒關係就有關係
• 沒有很明確的從屬關係，但透過第三方可以獲得關係者
• 同範例：avengers(hero_name=美國隊長)—avenger_friends—
avengers
Facebook用戶 用戶_社團
1 1~N
Facebook社團
1~N 1

33. 真沒關係就硬拉關係
• 完全沒有關係，硬是拉堆成夥
• 在資料結構上完全沒有從屬關係，只在商業邏輯或流程上有相關
• 乍看之下好像很少會用到，但實際上滿常遇到的
Facebook用戶
Google用戶
GitHub用戶
Linkedin用戶
你
社群網站帳號
1 1~N

34. 首領使用後很滿意結果，這樣一來一次就
可以查出所要的情報，但你注意到一個小
細節，就是查詢語法重複出現特定的field，
於是你建議首領可以這樣做…

35. 使用Fragment來減少Query重複的語法
1. 宣告Fragment
2. 使用Fragment
3. 在graphiql進行測試

37. 首領從這份情報中，發現陣營裡的酷寒戰
士竟然是頭號對手美國隊長的摯友，這讓
我們可以使出一些骯髒齷齪的手段來打擊
美國隊長

38. 首領覺得你辦事很俐落，把你升為副手
期望你在統治世界大業繼續努力
下集待續…

39. 課後問卷