Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About me ● Yuta Tomiyama (富山 雄太) ● Working at: DMM.com LLC ● Second job: Appify Technologies, Inc. ● Android Engineer ● Twitter: マヤミト(mayamito)@yt8492 ● GitHub: yt8492

Slide 3

Slide 3 text

Do you use Jetpack Compose and GraphQL(Apollo) ?

Slide 4

Slide 4 text

How do you manage state and API calls?

Slide 5

Slide 5 text

Today we learn Apollo + Jetpack Compose and state management through Apollo + React

Slide 6

Slide 6 text

Learn what Apollo + React provided and solved This Session's Goal

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Introduction ● What's React? ● What's GraphQL? ● What's Apollo Client(JavaScript)? ● What Apollo + React enable?

Slide 9

Slide 9 text

What's React? ● React is a JavaScript library for building user interfaces ● Declarative UI ● UI Component written in pure JavaScript

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

React and Jetpack Compose has similar feature ● Functional Component and Composable Function

Slide 12

Slide 12 text

React and Jetpack Compose has similar feature ● Hooks → Composable Function

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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)

Slide 15

Slide 15 text

Declarative Data Fetching Apollo Client's hooks encapsulates the logic for retrieving your data, tracking loading and error states, and updating your UI.

Slide 16

Slide 16 text

useQuery When start fetching ○ data = undefined ○ loading = true ○ error = undefined

Slide 17

Slide 17 text

useQuery When finish fetching and returned correct response ○ data = query result ○ loading = false ○ error = undefined

Slide 18

Slide 18 text

useQuery When finish fetching and returned error ○ data = undefined ○ loading = false ○ error = GraphQL error

Slide 19

Slide 19 text

useMutation Initial state ○ data = undefined ○ loading = false ○ error = undefined

Slide 20

Slide 20 text

useMutation When click CreateTodoButton and start mutation ○ data = undefined ○ loading = true ○ error = undefined

Slide 21

Slide 21 text

useMutation When finish mutation successfully and returned response ○ data = mutation result ○ loading = false ○ error = undefined

Slide 22

Slide 22 text

useMutation When finish mutation and returned error ○ data = undefined ○ loading = false ○ error = GraphQL error

Slide 23

Slide 23 text

Intelligent Caching When client has no Book cache:

Slide 24

Slide 24 text

Intelligent Caching When client has Book cache:

Slide 25

Slide 25 text

Intelligent Caching useQuery results are automatically updated by cache hit

Slide 26

Slide 26 text

Intelligent Caching useQuery results are automatically updated by cache hit

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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…

Slide 31

Slide 31 text

Execute Query using Apollo Kotlin ● Composable functions are not yet provided 😭 ○ We can't execute query like useQuery

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Apollo Wrapper and Todo APP Example Repository yt8492 / ApolloComposeTodoApp https://github.com/yt8492/ApolloComposeTodoApp

Slide 34

Slide 34 text

Implement watch() Composable Function React hooks Composable Function useQuery useMutation watch mutation query mutation

Slide 35

Slide 35 text

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)

Slide 36

Slide 36 text

Implement in Jetpack Compose ● Think of composable function interface

Slide 37

Slide 37 text

Implement watchAsFlow() ● Share watch logic with first fetch and refetch ○ First implement function returns flow and convert result in it

Slide 38

Slide 38 text

Implement watchAsFlow()

Slide 39

Slide 39 text

Implement watchAsFlow()

Slide 40

Slide 40 text

Define Error Type

Slide 41

Slide 41 text

Define Error Type

Slide 42

Slide 42 text

Implement watch() Composable Function

Slide 43

Slide 43 text

Implement watch() Composable Function

Slide 44

Slide 44 text

Implement mutation() Composable Function React hooks Composable Function useQuery useMutation watch mutation query mutation

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

Implement in Jetpack Compose ● Think of composable function interface

Slide 47

Slide 47 text

Implement in Jetpack Compose ● Think of composable function interface

Slide 48

Slide 48 text

Implement mutation() Composable Function

Slide 49

Slide 49 text

Example: TodoAPP ● Pages ○ Todo List Page ○ Todo Detail Page ○ Todo Create Page

Slide 50

Slide 50 text

Server Schema

Slide 51

Slide 51 text

Cache Setting

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Todo List Page Query and Mutation

Slide 54

Slide 54 text

Execute Todo List Page Query and Mutation

Slide 55

Slide 55 text

Update UI Immediately When Execute Mutation mutation returns todos and cache saved click checkbox watched query results updated by cache UI updated

Slide 56

Slide 56 text

Todo Detail Page ● Show selected todo ● Toggle todo done status

Slide 57

Slide 57 text

Todo Detail Page Query and Mutation

Slide 58

Slide 58 text

Execute Todo Detail Page Query and Mutation

Slide 59

Slide 59 text

Execute Todo Detail Page Query and Mutation

Slide 60

Slide 60 text

Todo List Updated When Toggle in Todo Detail

Slide 61

Slide 61 text

Todo Create Page ● Input todo title ● Create todo button

Slide 62

Slide 62 text

Todo Create Page Mutation

Slide 63

Slide 63 text

Execute Todo Create Page Mutation

Slide 64

Slide 64 text

Todo List Updated When Todo Created navigate to create page pop back to list page updated list by cache

Slide 65

Slide 65 text

🎉

Slide 66

Slide 66 text

When the cache is not updated

Slide 67

Slide 67 text

When the cache is not updated

Slide 68

Slide 68 text

When the cache is not updated mutation executed but updated todo not returned click checkbox watched query results are not updated nothing changed

Slide 69

Slide 69 text

Apollo Wrapper and Todo APP Example Repository yt8492 / ApolloComposeTodoApp https://github.com/yt8492/ApolloComposeTodoApp

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Thank you!

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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