About me ● Yuta Tomiyama (富山 雄太) ● Working at: DMM.com LLC ● Second job: Appify Technologies, Inc. ● Android Engineer ● Twitter: マヤミト(mayamito)@yt8492 ● GitHub: yt8492
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
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
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)
Declarative Data Fetching Apollo Client's hooks encapsulates the logic for retrieving your data, tracking loading and error states, and updating your UI.
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
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
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
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
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)
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)
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
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
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
yt8492
beberlei
gishi_yama
ancaghenade
mame
octu0
munetoshi
shinmiy
fornewid
tmokmss
yui_knk
koba04
gotok365
holman
dougneiner
speakerdeck
smashingmag
hursman
keavy
aarron
caitiem20
lemiorhan
jrom
skipperchong