State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks

Jetpack Composeの状態管理とAPIコール - React Hooksに習う、Apollo + Jetpack Compose
DroidKaigi 2022にて発表
https://github.com/yt8492/ApolloComposeTodoApp

Transcript

1. State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks DroidKaigi 2022
2. About me • Yuta Tomiyama (富山 雄太) • Working at: DMM.com LLC • Second job: Appify Technologies, Inc. • Android Engineer • Twitter: マヤミト(mayamito)@yt8492 • GitHub: yt8492
3. Do you use Jetpack Compose and GraphQL(Apollo) ?
4. How do you manage state and API calls?
5. Today we learn Apollo + Jetpack Compose and state management through Apollo + React
6. Learn what Apollo + React provided and solved This Session's Goal
7. Learn what Apollo + React provided and solved Then think of state management and API calls in Apollo + Jetpack Compose through Apollo + React and how to realize it This Session's Goal
8. Introduction • What's React? • What's GraphQL? • What's Apollo Client(JavaScript)? • What Apollo + React enable?
9. What's React? • React is a JavaScript library for building user interfaces • Declarative UI • UI Component written in pure JavaScript
10. React and Jetpack Compose has similar feature • Declarative UI • Functional Component → Composable Function • Hooks → Composable Function ◦ useState → remenber mutableStateOf ◦ useEffect → LaunchedEffect, DisposableEffect ◦ Custom Hooks → Custom Comosable Function
11. React and Jetpack Compose has similar feature • Functional Component and Composable Function
12. React and Jetpack Compose has similar feature • Hooks → Composable Function
13. What's GraphQL? • GraphQL is a query language for APIs ◦ Type safe ◦ Send a single GraphQL query to API and get all the data your app needs ▪ No overfetch ▪ No underfetch • GraphQL is modeling the business domain in a graph structure ◦ Fetching resources: query ◦ Updating resources: mutation
14. What's Apollo Client(JavaScript)? • Comprehensive state management library, not only to call GraphQL API • Manage both local and remote data with GraphQL ◦ Declarative data fetching ◦ Intelligent caching • Designed for modern React ◦ Apollo Client library provides hooks API(useQuery, useMutation)
15. Declarative Data Fetching Apollo Client's hooks encapsulates the logic for retrieving your data, tracking loading and error states, and updating your UI.
16. useQuery When start fetching ◦ data = undefined ◦ loading = true ◦ error = undefined
17. useQuery When finish fetching and returned correct response ◦ data = query result ◦ loading = false ◦ error = undefined
18. useQuery When finish fetching and returned error ◦ data = undefined ◦ loading = false ◦ error = GraphQL error
19. useMutation Initial state ◦ data = undefined ◦ loading = false ◦ error = undefined
20. useMutation When click CreateTodoButton and start mutation ◦ data = undefined ◦ loading = true ◦ error = undefined
21. useMutation When finish mutation successfully and returned response ◦ data = mutation result ◦ loading = false ◦ error = undefined
22. useMutation When finish mutation and returned error ◦ data = undefined ◦ loading = false ◦ error = GraphQL error
23. Intelligent Caching When client has no Book cache:
24. Intelligent Caching When client has Book cache:
25. Intelligent Caching useQuery results are automatically updated by cache hit
26. Intelligent Caching useQuery results are automatically updated by cache hit
27. Intelligent Caching • Apollo Client can store cache GraphQL query result in a graph structure ◦ Entities in the graph are identified by id and __typename and automatically normalized ◦ Programmers no need to manage the cache themselves • Apollo Client updates query result automatically when local cache updated by data from server • You can use the query result of Apollo Client as a Single Source of Truth
28. Introduction Overview • React and Jetpack Compose has similar feature • GraphQL is a type safe query language for APIs • Apollo Client is a comprehensive state management library for React • Apollo + React enable Single Source of Truth architecture
29. Introduction Overview • React and Jetpack Compose has similar feature • GraphQL is a type safe query language for APIs • Apollo Client is a comprehensive state management library for React • Apollo + React enable Single Source of Truth architecture → We can do the same things with Apollo + Jetpack Compose
30. Introduce Apollo Kotlin • Apollo Client for Kotlin • Generate Kotlin codes from GraphQL queries • Features ◦ Kotlin code generation ◦ Kotlin Coroutines support ◦ Normalized cache ▪ InMemory ▪ SQLite ◦ etc…
31. Execute Query using Apollo Kotlin • Composable functions are not yet provided 😭 ◦ We can't execute query like useQuery
32. Create Composable Function like Apollo Client Hooks • We can create hooks-like composable function by wrapping Apollo Kotlin Client • Implement extension functions to Apollo Kotlin Client with reference to the JavaScript Apollo Client API React Hooks Composable Function useQuery useMutation watch mutation query mutation
33. Apollo Wrapper and Todo APP Example Repository yt8492 / ApolloComposeTodoApp https://github.com/yt8492/ApolloComposeTodoApp
34. Implement watch() Composable Function React hooks Composable Function useQuery useMutation watch mutation query mutation
35. See the useQuery API • Arguments ◦ Parsed GraphQL query string ◦ variables • Results ◦ data(GraphQL query result) ◦ loading(If true, the query is still in flight and results have not yet been returned) ◦ error(Either an array of graphQLErrors or a single networkError) ◦ refetch(Re-execute query function)
36. Implement in Jetpack Compose • Think of composable function interface
37. Implement watchAsFlow() • Share watch logic with first fetch and refetch ◦ First implement function returns flow and convert result in it
38. Implement watchAsFlow()
39. Implement watchAsFlow()
40. Define Error Type
41. Define Error Type
42. Implement watch() Composable Function
43. Implement watch() Composable Function
44. Implement mutation() Composable Function React hooks Composable Function useQuery useMutation watch mutation query mutation
45. See the useMutation API • Arguments ◦ mutation(Parsed GraphQL query string) • Results ◦ mutateFunction(A function to trigger the mutation) ◦ data(Returned from mutation) ◦ loading(If true, the mutation is currently in flight) ◦ error(Either an array of graphQLErrors or a single networkError)
46. Implement in Jetpack Compose • Think of composable function interface
47. Implement in Jetpack Compose • Think of composable function interface
48. Implement mutation() Composable Function
49. Example: TodoAPP • Pages ◦ Todo List Page ◦ Todo Detail Page ◦ Todo Create Page
50. Server Schema
51. Cache Setting
52. Todo List Page • Show all todos • Show completed todos • Show UnCompleted todos • Toggle todo done status • Navigate to todo create page • Navigate to todo detail page
53. Todo List Page Query and Mutation
54. Execute Todo List Page Query and Mutation
55. Update UI Immediately When Execute Mutation mutation returns todos and cache saved click checkbox watched query results updated by cache UI updated
56. Todo Detail Page • Show selected todo • Toggle todo done status
57. Todo Detail Page Query and Mutation
58. Execute Todo Detail Page Query and Mutation
59. Execute Todo Detail Page Query and Mutation
60. Todo List Updated When Toggle in Todo Detail
61. Todo Create Page • Input todo title • Create todo button
62. Todo Create Page Mutation
63. Execute Todo Create Page Mutation
64. Todo List Updated When Todo Created navigate to create page pop back to list page updated list by cache
65. 🎉
66. When the cache is not updated
67. When the cache is not updated
68. When the cache is not updated mutation executed but updated todo not returned click checkbox watched query results are not updated nothing changed
69. Apollo Wrapper and Todo APP Example Repository yt8492 / ApolloComposeTodoApp https://github.com/yt8492/ApolloComposeTodoApp
70. Conclusion • Apollo Client is a comprehensive state management library, not only to call GraphQL API ◦ Apollo Client enables Single Source of Truth architecture ◦ Apollo Client + React enables declarative data fetching ◦ Apollo + React make easy to state management and API calls in frontend development ◦ But Apollo Kotlin not yet provide composable functions like Apollo Client hooks API • We can create composable function like Apollo Client hooks API by wrapping Apollo Kotlin ◦ We can enable Single Source of Truth architecture and declarative data fetching in Jetpack Compose ◦ Apollo + Jetpack Compose make easy to state management and API calls in Android development
71. Appendix: Think of other API call • You can also fetch data declarative in other API ◦ Create Composable function to call API ◦ returns data, loading, error states and update
73. Thank you!
74. Bibliography 1. https://reactjs.org/ 2. https://reactjs.org/docs/components-and-props.html 3. https://reactjs.org/docs/hooks-intro.html 4. https://graphql.org/ 5. https://graphql.org/learn/ 6. https://www.apollographql.com/docs/ 7. https://www.apollographql.com/docs/react 8. https://www.apollographql.com/docs/react/why-apollo 9. https://www.apollographql.com/docs/react/caching/overview
75. Bibliography 10. https://www.apollographql.com/docs/react/data/queries 11. https://www.apollographql.com/docs/react/data/mutations 12. https://www.apollographql.com/docs/kotlin 13. https://www.apollographql.com/docs/kotlin/essentials/queries 14. https://www.apollographql.com/docs/kotlin/caching/query-watchers 15. https://www.apollographql.com/docs/kotlin/essentials/mutations 16. https://www.apollographql.com/docs/kotlin/caching/programmatic-ids