React Native:
Awesome Offline Apps with GraphQL

@vilvaathibanpb

- Vilva athiban p b

About me

JavaScript + React + GraphQL  = 👨‍💻@Omio, Berlin

Creator of styled-wind, graphql-codegen (VS Code) and hql-tag

Contributing to Open-source libraries of Product ride (https://productride.com/)

Twitter is where I share my tech updates - @vilvaathibanpb

@vilvaathibanpb

@ Product ride

• Building the next generation applications (Web & Mobile)
• For early-stage products/startups:
  • One month MVP Program
  • Ideation to Deployment program
• For existing products/startups:
  • Setup User-Tracking and Data analysis
  • Fix technical SEO issues
  • Improve Performance
• OSS and community-focused Organization
• https://productride.com/

Let's begin

@vilvaathibanpb

React native - the future (May be)

Rise of react native

@vilvaathibanpb

One code - Multiple platforms

Consistency in Product across platforms

Improved Developer experience

Future of react native: Fabric

@vilvaathibanpb

New threading model

Async rendering and multiple rendering capabilities

Simplified bridge between JS and native

are we ready for the future?

The PROBLEMs

@vilvaathibanpb

Heavy Animations

Latest iOS/Android features

Device-Specific APIs

Offline Mode

offline mode

Current Options

Problems

GraphQL to rescue

The SOLUTION

@vilvaathibanpb

React Native

+

Apollo Client

+

Apollo Cache persist

+

GraphQL codegen

 =  AWESOME

lets discuss the tools

APollo cache persist

Simple persistence for all Apollo Client 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

cache with asyncstorage

cache with graphql - architecture

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 and performance by leveraging fetch-policy

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

live code a demo! - 🤞

@vilvaathibanpb

if my live coding is messed :(

QA TIME

@vilvaathibanpb

follow me on twitter