React Native:
Awesome Offline Apps with GraphQL


- 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 (


Twitter is where I share my tech updates - @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

Let's begin


React native - the future (May be)

Rise of react native


One code - Multiple platforms


Consistency in Product across platforms


Improved Developer experience

Future of react native: Fabric


New threading model


Async rendering and multiple rendering capabilities


Simplified bridge between JS and native

are we ready for the future?



Heavy Animations


Latest iOS/Android features


Device-Specific APIs


Offline Mode

offline mode

Current Options




GraphQL to rescue



React Native


Apollo Client


Apollo Cache persist


GraphQL codegen


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


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


Native (iOS/Android)

Cache data

live code a demo! - 🤞


if my live coding is messed :(



follow me on twitter

React Native: Awesome Offline Apps with GraphQL

By Vilva Athiban

React Native: Awesome Offline Apps with GraphQL

  • 313