TYPESAFE CACHING FOR
REACT NATIVE - INCREDIBLE DX WITH
GRAPHQL TOOLING
@vilvaathibanpb
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
- 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
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
Let's begin
@vilvaathibanpb
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
![](https://media1.giphy.com/media/3oEjI1erPMTMBFmNHi/giphy.gif)
The PROBLEM
@vilvaathibanpb
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
React Native in Offline mode
Need for Caching data
AsyncStorage - storage option
Pain in using AsyncStorage for Cache data
The SOLUTION
@vilvaathibanpb
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
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?
![](https://www.rezirb.com/wp-content/uploads/2015/06/INSD_01.jpg)
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
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
what we achieved at omio?
@vilvaathibanpb
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
next steps
- Replace Redux
- Offline Web and Mobile Apps
- Company-Wide configurations
@vilvaathibanpb
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
QA TIME
@vilvaathibanpb
![](https://p10cdn4static.sharpschool.com/UserFiles/Servers/Server_208743/Image/twitter2.png)
follow me on twitter
![](https://media1.giphy.com/media/l0CLV6LkWccT6CwG4/giphy.gif)
![](https://media3.giphy.com/media/AeWoyE3ZT90YM/giphy.gif)
TYPESAFE CACHING FOR REACT NATIVE - INCREDIBLE DX WITH GRAPHQL TOOLING
By Vilva Athiban
TYPESAFE CACHING FOR REACT NATIVE - INCREDIBLE DX WITH GRAPHQL TOOLING
- 365