integrate redux-observable and react-apollo

1. 🤔
redux-observable
v.s
react-apollo

2. 解決的問題
😍
• graphql(gql`yourquery`, options)(Component)
• ⼤大幅簡化 data fetch 的邏輯
• 可以在 graphql HOC 定義各種奇技淫巧的操作
• ⾃自動 Observable

3. 遇到的問題
💩
• component 必須要知道 data 的形狀狀，跟 query 的 schema ⾼高度耦合，
實際上有點 container 的感覺
• 並不是每個 query 都是在 componentDidMount 就要送出去。
• 仍然會遇到 data 需要在不同層級取⽤用的問題。
• error handling。{props.error && <ErrorBlock
error={props.error} />}

4. react-apollo 2
🤔
• 可以取⽤用 <Query />, <Mutation /> component 代替 HOC
• render props 有更更多彈性

5. 折衷⽅方案
😉
• 單純 query ⾴頁⾯面⽤用 react-apollo HOC
• 比較複雜的⾴頁⾯面搭配 redux-observable epic 操作
• 加入 apollo-link-http 作 request 的預處理理

6. containers/trivia-billing/SigningList/epics.js

7. containers/trivia-billing/PaymentList/index.js

8. containers/trivia-billing/AlertMessage/index.js

9. 原本以為這樣應該可⾏行行
😄
• 透過 epic 來來管理理複雜的非同步操作
• 透過 middleware 統⼀一處理理 error, logger, notification 等

10. 實際⽤用起來來好像也不錯
😊

11. 但...天不從⼈人願
🙁

12. 開始遇到⼀一些難解的問題...
🤢
• ☹簡單的 query 都必須 serialize 為 action，真的很⿇麻煩
• ☹如果是 mutate 操作，少了了 ObservableQuery 的幫助，必須送 action
⾃自⼰己 diff 更更新。
• ☹graphql 與 redux-observable 交錯，不知道怎麼整合比較優雅
• 要⾃自⼰己控管 loading state

13. Pagination
🤔

14. WTF?
🤔

15. Optimistic UI
🤔
updateComment = ({ id, content }) =>
mutate({
variables: { id, content },
optimisticResponse: {
__typename: “Mutation”,
updateComment: {
id,
content,
__typename: “comment”
}
}
})

16. Subscription, poll 等等
🤔

17. 思考 1
🌝
• redux 與 apollo 適合共存嗎？
• 怎樣的情況下要採⽤用哪個解決⽅方案比較好
• apollo 社群逐漸壯⼤大，功能也⽇日漸豐富
• redux 舒適圈
• 各種花式⽅方案 apollo-link-http apollo-link-state apollo-inmemory-cache
• apollo-final-solution

18. 各種情境思考
😶
• 讀操作頻繁，寫入操作少（報表等純 read ⽤用的 data）
• 讀操作少，寫入頻繁（批次操作）
• 讀寫皆頻繁（出帳系統、BD 系統等）

19. Observable Query
👀
• 優點：可以優雅解決批次操作的問題，省下不少功
• 缺點：擺脫了了 redux 的控制

23. Demo
-
• client.watchQuery(query)
• client.mutate
• graphql(query)
client.mutate({
mutation: gql`
mutation mutatePerson {
mutatePerson(input: { name: "eason", age: 150 }) {
id
name
age
}
}
`,
}).then(console.log)
obs$ = client.watchQuery({
query: gql`
query getPeople {
people {
id
name
age
}
}
`
})

24. 如果⽤用 redux…
🤔

25. 思考⼀一下
🤔
• 為什什麼 react-apollo 使⽤用 HOC？
• 使⽤用 redux 的限制？

26. 結論
⚖
• 銀彈是不存在的
• 如果開發時間允許，再多想幾分鐘
• redux 與 apollo 有各⾃自適合的場景
• 不要後悔悔

27. 天⾺馬⾏行行空
🤔
• 😜透過 redux middleware 機制來來監聽 query
• 👹強化 epic，加入類似 .ofGraphql 之類的機制
• 🙂利利⽤用 react16 的 Provider, Consumer 機制，將 graphql HOC 包裝後
的 component 當作 provider 使⽤用