GraphQL 台灣第一次小聚講題

2. 2016.10.27 成立
已有超過 800 成員

3. 宗旨
推動台灣在地化的 GraphQL 社群

4. 7%
21%
72%
還沒什什麼概念念 ⼤大致了了解⼀一些 在 project 使⽤用⼀一段時間
GraphQL Meetup 普查
(131 ⼈人)

5. GraphQL?

6. 2012 2015 2017
構思 GraphQL
(Facebook Mobile
Application- News Feed)
GraphQL Spec
以及 Reference 開源 開源兩兩年年後

7. 260Billion Requests
2015 in facebook

8. 許多公司採⽤用

10. 多種語⾔言⽀支援

11. awesome-graphql

12. Ecosystem

14. Conference

15. 以兩兩年年來來說，很厲害

16. GraphQL 魅⼒力力在哪？

17. 通常每個 GraphQL 講題
都需要先介紹⼀一下 REST

18. 有⼈人不知道 REST 嗎？

19. 前端要顯⽰示分享⽂文章下
⾯面的留留⾔言的留留⾔言的按讚
⼈人的名字 …..
REST 劣勢 1.

21. 後端⼯工程師說有這個
key …..
REST 劣勢 2.

23. Ready for GraphQL !

24. 焦點⼈人物
GraphQL, Immutable.js Co-creator

25. GraphQL Specification
facebook/graphql

26. Reference Implementation
graphql/graphql-js

27. Operation
Query Mutation Subscription

28. 在介紹這些之前要先介
紹不可或缺的⼯工具

29. GraphiQL

30. 以及

31. Launchpad

32. Query

33. ⾓角⾊色：REST 的 GET

34. 簡單 Query

35. Schema

36. 型別定義
取值

37. 傳參參數

38. 從外⾯面傳參參數

39. Object Fields

40. 回傳⾃自定義型別
驚嘆號代表不能為空值

41. 即可巢狀狀地取得物件的屬性

42. Fragment

43. 建立需要的資料片段
Fragment Spread
宣告特定的欄欄位
需指定型別

44. Mutation

45. ⾓角⾊色：REST 的
POST, PUT, DELETE

46. 先改寫⼀一下打招呼
改採⽤用⼀一個隨機的打招呼

47. 新定義的 Mutation
回傳值的型別
執⾏行行 Side Effect
回傳值，⽅方便便前端使⽤用

48. 實際去執⾏行行 Mutation

49. 成功！

50. Subscription

51. Project Owner：
我想要 Real Time 更更新

52. Polling
圖出⾃自 Robert Zhu - Realtime React Apps with GraphQL - React Conf 2017

53. Polling Frequently
圖出⾃自 Robert Zhu - Realtime React Apps with GraphQL - React Conf 2017

54. Subscription
圖出⾃自 Robert Zhu - Realtime React Apps with GraphQL - React Conf 2017

56. 語法跟 mutation ⼗十分接近，可想成會 resolve 多個值

57. GraphQL Server

58. 如果你是寫 js..

59. - express-graphql
- koa-graphql

61. Serverless GraphQL Backend

62. GraphQL Client

63. 先從最輕量量級的開始講

64. kadirahq/lokka

65. 但是...

66. Kadira 也是 storybook 的原開發公司

67. 只好...

68. apollographql/apollo-fetch

69. 接下來來是中/重量量級

71. 該⽀支援的都⽀支援
⽤用 redux 來來實作

72. 還有附帶 Chrome Extension 開發⼯工具

73. Relay

74. Relay 0.x
還沒碰過就不⽤用碰了了

75. 只要知道 Dynamic Queries
Resolve Query
Print
Query
Network
Write
Payload
time

76. Relay Modern

77. Static Queries -> AOT
Resolve
Query
Network
Write
Payload
time

78. Resolve Query
Print
Query
Network
Write
Payload
Resolve
Query
Network
Write
Payload
Relay 0.x
Relay Modern
time

79. 還有很多沒時間提到的

80. Cache
Batch Queries
Error Handling
Persisted Queries
Directive
Live Queries
Fragment Composition Dataloader
Authentication
Pagination

82. Meetup #2
徵求講者！

83. 學習資源

84. graphql.org

85. graphql.com (Explore GraphQL)

86. howtographql.com (How To GraphQL)

87. graphqlweekly.com

88. dev-blog.apollodata.com

89. GraphQL 問題、Meetup 的回饋
都歡迎寄信過來來
@chentsulin