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