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

TYPESAFE CACHING FOR REACT NATIVE - INCREDIBLE DX WITH GRAPHQL TOOLING

By Vilva Athiban

TYPESAFE CACHING FOR REACT NATIVE - INCREDIBLE DX WITH GRAPHQL TOOLING

  • 171