Offline and Reactive apps with Apollo Kotlin

Slides from Benoit Lubek and Martin Bonnin's talk at droidcon London 2022 🎃

Transcript

1. Caching your data graph Offline & Reactive apps with Apollo Kotlin
2. Hello, World! @BoD @MartinBonnin apollographql/apollo-kotlin
3. What is GraphQL? An open source language to describe and run your API
4. What is GraphQL? • Schema ◦ Int, Float, String, Boolean ◦ Objects, Interfaces, Unions ◦ Lists ◦ Nullability • Introspection • Deprecation
5. APIs in a REST world
6. https://apis.guru/graphql-voyager/
7. How does it look in practice query UserQuery { user { id login } }
8. How does it look in practice query UserQuery { user { id login avatar { small medium } } }
9. How does it look in practice query UserQuery { user { id login name } } { "data": { "user": { "id": "42", "login": "BoD", "name": "Benoit Lubek" } } }
10. How does it look in practice query UserQuery { user { id login name } } { "data": { "user": { "id": "42", "login": "BoD", "name": "Benoit Lubek" } } }
11. How does it look in practice query UserQuery { user { id email login name } } { "data": { "user": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } } }
12. Caching entities
13. How to deal with partial entities query ViewerQuery { # Returns a User viewer { id email avatarUrl } } query UserQuery($id: String) { # Also a User user(id: $id) { id email login name } }
14. How to deal with partial entities
15. How to deal with partial entities null means not cached? null means null?
16. How to deal with partial entities 👎 both are User - should share cache
17. Cache the HTTP response? { "data": { "viewer": { "id": "42", "email": "BoD@JRAF.org", "avatarUrl": "http://…" } } } { "data": { "user": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } } } key: ViewerQuery key: UserQuery(42) same entity, but different keys 👎
18. Entering Cache normalization Response → List<Record> A Record is a Map<String, Any?>
19. Cache normalization { "data": { "user": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } } } Response
20. Cache normalization { "data": { "user": CacheReference("42"), }, "42": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } } { "data": { "user": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } } } Response 2 Records
21. Adding fields { "data": { "user": CacheReference("42"), }, "42": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek", } }
22. Adding fields { "data": { "user": CacheReference("42"), }, "42": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek", // New Record field "avatarUrl": "https://…", } }
23. Adding fields { "data": { "user": CacheReference("42"), }, "42": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek", // New Record field "avatarUrl": "https://…", } } Ids!
24. What if there’s no id? { "data": { "user": { "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } } }
25. Use the field’s path as key { "data": { "user": CacheReference("data.user"), }, "data.user": { "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } }
26. What if there are several paths? { "data": { "user": {…} "comments": [ { "text": "#dcldn22 is awesome 😎󰏅", "date": "2022-10-28T10:00Z", "user": { "login": "BoD", "avatarUrl": "https://" }, }, ], } }
27. Use the field’s path as key { "data": { "user": CacheReference("data.user"), "comments": [CacheReference("data.comments[0]")], }, "data.user": { "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" }, "data.comments[0]": { "title": "Write retrowave slides!", "checked": true, "user": CacheReference("data.comments[0].user") }, "data.comments[0].user": { "login": "BoD", "avatarUrl": "https://" } } Duplication
28. Always query your ids
29. This is all typesafe { "data": { "user": CacheReference("42"), }, "42": { "id": "42", "email": "BoD@JRAF.org", "login": "BoD", "name": "Benoit Lubek" } } Data( user=User( id=42, email=BoD@JRAF.org, login=BoD, name=Benoit Lubek ) ) 2 Records 1 Data class
30. Apollo Kotlin
31. Storage: in-memory or persistent val memoryCache = MemoryCacheFactory(maxSizeBytes = 5_000_000) val apolloClient: ApolloClient = ApolloClient.Builder() .serverUrl(SERVER_URL) .normalizedCache(memoryCache) .build()
32. Storage: in-memory or persistent val sqlCache = SqlNormalizedCacheFactory(context, "app.db") val apolloClient: ApolloClient = ApolloClient.Builder() .serverUrl(SERVER_URL) .normalizedCache(sqlCache) .build()
33. Storage: in-memory and persistent val memoryCache = MemoryCacheFactory(maxSizeBytes = 5_000_000) val sqlCache = SqlNormalizedCacheFactory(context, "app.db") val memoryThenSqlCache = memoryCache.chain(sqlCache) val apolloClient: ApolloClient = ApolloClient.Builder() .serverUrl(SERVER_URL) .normalizedCache(memoryThenSqlCache) .build()
34. Watchers
35. The cache updates after a mutation mutation { updateUser(id: "42", status: "At dcldn22 😃") { id status } }
36. The cache updates after a mutation watch() mutate("At dcldn22 😃") // receives from network "At dcldn22 😃" // updates the cache "At dcldn22 😃" Coroutine 1 Coroutine 2 // receives from network "Work from home 🏡" // wait for cache updates
37. Single source of truth
38. Conclusion • Type-safe language + Tooling = 💜 • Offline support is one line ✈ • Don’t forget your ids!
39. Where to go from here • Declarative cache ◦ Available in 3.0 • Client improvements ◦ apollo-normalized-cache-incubating ◦ #3566 (data age) ◦ #3807 (pagination) • Server side caching ◦ @cacheControl ◦ Automated Persisted Queries
40. For inspiration 🎊 github.com/joreilly/Confetti
41. Merci! @BoD @MartinBonnin apollographql/apollo-kotlin
42. It depends.
43. Declarative cache type User { id: ID! name: String! } type Query { user(id: ID!): User } extend type User @typePolicy(keyFields: "id") extend type Query @fieldPolicy(forField: "user", keyArgs: "id")
44. Optimistic updates
45. Declarative cache type User { id: ID! name: String! } type Query { user(id: ID!): User } extend type User @typePolicy(keyFields: "id") extend type Query @fieldPolicy(forField: "user", keyArgs: "id")
46. Schema # schema.graphqls type Speaker implements Node { id: ID! name: String! company: String session(name: String!): Session sessions(first: Int, after: ID, orderBy: SessionOrder): [Session!] }
47. Caching entities