iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
3
Modern Web

Think in GraphQL系列 第 30

GraphQL 前端 (4) - 部落格系統 Demo + 小結

  • 分享至 

  • xImage
  •  

header

關於昨天的 project ,發現有些太貪心了...一天之內完全不可能講完,所以先放上 CodeSandbox 範例,最後的成果如下:

flow

有興趣的可以自己去 trace code ,這邊特別提到幾點:

  1. 要在 Apollo Client 中加入每次 request 要帶的 header :

img

  1. 把需要 Authentication 資訊的 Component 套上 higher order function WithUserRequireAuth

img

  1. login mutation 做完後,要做 refetchQueries 來取得 CURRENT_USER ,這時候要記得把得到的 token 放進 local storage 再做 query ,這樣送出的 request 才能成功得到結果。在 CURRENT_USER 的 query 成功後, Apollo Client 會自動去更新 Cache ,也去 rerender 一些會需要登入使用者資料的 component 。

img


終於來到了尾聲,剛開始雖然寫得得心應手,但一篇也是花了 2 到 3 小時才生出來。而中期發現其實很多概念我自己也沒有到很清楚,很多時候都是邊學邊打文章、寫完程式 de 完 bug 後才有辦法生出文章。到最後面竟然還不自量力地挑戰了完全不熟的 Apollo Client ,更何況我本來就對前端和 React 不太熟悉... 。

不過還是很感謝大家這幾天來的觀看!之後我還會花時間回去把各篇文章 (尤其是教學文)再修飾一下,順便加上程式範例!希望這一系列的文章可以幫助使用中文的人接觸 GraphQL 的技術!


最後附上一些推薦的資源:


上一篇
GraphQL 前端 (3) - Authentication 與 Authorization
系列文
Think in GraphQL30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
陳小熊
iT邦新手 4 級 ‧ 2018-11-15 00:27:32

謝謝大大分享,恭喜完賽~~

0
阿展展展
iT邦好手 1 級 ‧ 2020-03-09 12:02:47

/images/emoticon/emoticon32.gif

fx777 iT邦新手 5 級 ‧ 2020-03-09 15:02:18 檢舉

/images/emoticon/emoticon25.gif

我要留言

立即登入留言