TYPESAFE CACHING FOR
REACT NATIVE - INCREDIBLE DX WITH
GRAPHQL TOOLING
@vilvaathibanpb
- Vilva athiban p b
About me
JavaScript + React + GraphQL = 👨💻@Omio, Berlin
Creator of styled-wind, graphql-codegen (VS Code) and hql-tag
Twitter is where I share my tech updates - @vilvaathibanpb
@vilvaathibanpb
Let's begin
@vilvaathibanpb
The PROBLEM
@vilvaathibanpb
React Native in Offline mode
Need for Caching data
AsyncStorage - storage option
Pain in using AsyncStorage for Cache data
The SOLUTION
@vilvaathibanpb
React Native
+
Apollo Client
+
Apollo Cache persist
+
GraphQL codegen
= AWESOME
React Native + apollo client
Quick Intro for those who doesn't know
APollo cache persist
Simple persistence for all Apollo Client 2.0 cache implementations, including InMemoryCache
GraphqL codegen
GraphQL Code Generator is a CLI tool that can generate TypeScript typings out of a GraphQL schema.
GraphqL codegen - plugins
typescript - Generate types for TypeScript - those are usually relevant for both client-side and server-side code
typescript-operations - Generate client specific TypeScript types (query, mutation, subscription, fragment)
GraphqL codegen - plugins [contd.]
typescript-react-apollo - Generate TypeScript types, and React-Apollo Components
near-operation-file - Generates operation code near the source file
GraphqL codegen - SERVER
typescript-resolvers - generates TypeScript signature for resolve functions of your GraphQL API
advantages
Organized Cache data management with queries/mutations instead of Nested JSON
Awesome DX with autocomplete and typescript support
Shared cache across devices and platforms
Better User Experience
other advantages?
Local state management
With Apollo GraphQL, no external library is required for state management.
The local state can be managed with queries/mutations thereby making clean and maintainable code.
SHARED cache data
The cache data is structured and works similar across devices. Hence cache/offline data can be shared across devices and platforms
React Native
Web
Native (iOS/Android)
Cache data
DEMO time! - 🤞
@vilvaathibanpb
what we achieved at omio?
@vilvaathibanpb
next steps
- Replace Redux
- Offline Web and Mobile Apps
- Company-Wide configurations
@vilvaathibanpb
QA TIME
@vilvaathibanpb
follow me on twitter
