91APP 電商技術大解密 (2020 線上分享系列)：提高前後端串接效率的新作法——使用 GraphQL & React-Apollo

主題：提高前後端串接效率的新作法——使用 GraphQL & React-Apollo
講師：周仰皓（Andy Chou）軟體工程師

前後端分離是現今常見的網站架構，然隨著網站的日漸成長、服務的複雜化，提升前端與後端的串接效率將是大型網站無可避免的一項挑戰，本場演講將會分享 91APP 如何運用 GraphQL 及 React-Apollo，幫助團隊解決這項難題。

Youtube: https://youtu.be/0Bb2btvd6Ns

91APP Tech Network: https://www.91app.tech/
91APP Tech Group: https://www.facebook.com/91apptech/

Transcript

1. 提高前後端串接效率的新作法 - 使用 GraphQL & React Apollo 2020/06/11 Andy Chou
2. 大綱 2
3. 大綱 • 以前串接前後端的做法：以 redux-observable 為例 • 什麼是 GraphQL / React Apollo？ • 為什麼要用 GraphQL / React Apollo？ • 簡單實作範例 - 從書籍與作者的陣列，實作資料索取與新增 • 91APP 專案進階範例 - 分類頁無限捲軸 3 建議先備知識：React Hook, Context and JS ES6 syntax
4. 我是誰 4
5. 自我介紹 - 周仰皓 ( Andy Chou ) • 跨電商及電子業的軟體工程師 • 負責商家官網開發，現使用 React, Redux, NodeJS, GraphQL 等技術。 5
6. 以前串接前後端的做法 6
7. 以前串接前後端的做法 • 早期 - 使用原生 XMLHttpRequest() • JS 推出 Promise 後 - 使用 Fetch, Axios, SuperAgent 等 • 2013 年 Facebook 首次推出 React 後 - 將 Fetch API 封裝在 React, React-Hooks 內 • 2015 年 Redux 推出 React-Redux, 其他團隊出 Middleware 後 - 將 Fetch API 搭配 Redux-Thunk, Redux-Saga, Redux-Observable 7
8. 簡單任務，嘗試使用 Redux-Observable • 任務：拉資料，並顯示在畫面 8
9. 結果... • 程式碼好多好複雜，寫了 111 行 Action - 3 行 Action Creator - 29 行 Reducer - 18 行 Epic - 25 行 Fetch API - 11 行 Data Processing - 25 行 9
10. 有沒有快又省時的做法呢 10
11. Wow！ • 竟然有其他方法 43 行，省去接近三分之二的程式碼！ Query Syntax - 15 行 Fetch API - 3 行 Data Processing - 24 行 使用 Hook - 1 行 11
12. 是什麼方法呢？ 12
13. 原來是... 13
14. 什麼是 GraphQL / React Apollo？ 14
15. 什麼是 GraphQL？ • 為了詢問 API 而生，新的查詢語言 • 為了滿足查詢語言而生，能與既存資料互動的執行環境 A query language for your API GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. https://graphql.org/ 15
16. 新的查詢語言 - Declarative Syntax GraphQL query language 16 Feedback data
17. 與既存資料互動的執行環境 - GraphQL as an API Gateway https://medium.com/@evenchange4/2018-graphql-%E6%BC%B8%E9%80%B2%E5%BC%8F%E5%B0%8E%E5%85%A5%E7%9A%84%E6%9E%B6%E6%A7%8B-aeb2603f2223 17
18. 誰在用 GraphQL？ https://graphql.org/ 18
19. 什麼是 React Apollo？ • 在 React framework 中，可以讓我們從 GraphQL server 取資 料（的函式庫） React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. https://github.com/apollographql/react-apollo 19
20. 為什麼要用 GraphQL / React Apollo？ 20
21. GraphQL 解決的問題 1. 串接後端從多個 Endpoints 變一個 REST API Endpoint domain.com/books domain.com/book/:id domain.com/authors domain.com/author/:id GraphQL Endpoint domain.com/graphql?query=xxxx graphQL 自動產生 query string，實作上不必手 動處理 21
22. GraphQL 解決的問題 1. 串接後端從多個 Endpoints 變一個 - 範例 Query 1 Query 2 22
23. GraphQL 解決的問題 2. 前端精準取得自己要的資料，甚至可巢狀取 少取 巢狀取 23
24. React Apollo 解決的問題 處理非同步的複雜邏輯，不需要自己處理 Redux-Observable React Apollo someAction someActionFulfilled someActionRejected Redux Store dispatch Epic Middleware Reducer useQuery, useMutation, etcs 自動提供 loading 及 error 兩種變數可取用 自動提供 data 變數可供取用 自動管理 Apollo Client (Context Provider) 24
25. React Apollo 解決的問題 處理非同步的複雜邏輯，不需要自己處理 React Apollo 43 行 111 行 25 Redux-Observable
26. 簡單實作範例 - 從書籍與作者的陣列，實作資料索取與新增 https://github.com/andy770921/graphQL-demo https://github.com/iamshaunjp/graphql-playlist 26
27. 前置作業 - Server 端已提供 GraphQL API 27
28. React Apollo 實作步驟 1. 建立 ApolloClient ( 被封裝後的 React Context Provider ) 2. 寫 GraphQL 的類物件專用語法，看要拿甚麼資料就怎麼寫 3. 使用 useQuery, useLazyQuery, useMutation 的 hooks 28
29. React Apollo - 建立 ApolloClient 1. 用 ApolloClient 物件 定義串接 GraphQL 的網址 2. 外層新增 <ApolloProvider> 3. 內層 Component 就可使 用 Query 回來的資料 29
30. React Apollo - 用 GraphQL 語法宣告想取的資料 30
31. React Apollo - 使用 React Apollo 提供的 Hook 情境一：一進入頁面就需要取資料 - 使用 useQuery 31
32. React Apollo - 使用 React Apollo 提供的 Hook 情境二：使用者操作才需要取資料 - 使用 useLazyQuery 32
33. React Apollo - 使用 React Apollo 提供的 Hook 情境三：輸入後，新增資料進資料庫 - 使用 useMutation 33
34. 91APP 專案進階範例 - 分類頁無限捲軸 34
35. 無限捲軸功能的實作 - 使用 fetchMore https://www.apollographql.com/docs/react/data/pagination/ 35
36. 結論 36
37. 結論 1. GraphQL 可做為 API Gateway，讓前端更方便操作資料 2. React Apollo 可滿足大部分資料操作情境，比如向 server 取 資料、取更多資料、修改資料 3. 希望可以加速各位開發速度，試用看看吧 37