#1 fix(IndexedDB for react-native), feat(reduced depenency from idb),…

… feat(offline store customizable)

README.md

@@ -11,7 +11,7 @@ yarn add react-relay relay-offline
 ```
 
 
-## Example
+## React Web Example
 
 The [relay-offline-examples](https://github.com/morrys/relay-examples) repository is a fork of [relay-examples](https://github.com/relayjs/relay-examples) and contains an integration of react-relay-offline. To try it out:
 
@@ -46,15 +46,16 @@ Change the renderer
 import {QueryRenderer} from 'react-relay-offline'; 
 ```
 
-## React Native
+## React Native Example
+
 How to create the environment
 
 ```
 import { Network } from 'relay-runtime';
 import { OfflineStore, Store, Environment, RecordSource } from 'react-relay-offline';
 
 const network = Network.create(fetchQuery);
-const storeOffline = OfflineStore(network, {});
+const storeOffline = OfflineStore(network);
 const source = new RecordSource(storeOffline);
 const store = new Store(storeOffline, source);
 const modernEnvironment = new Environment({ network, store, dataFrom: "CACHE_FIRST" }, storeOffline);
@@ -68,6 +69,42 @@ import {QueryRenderer} from 'react-relay-offline';
 
 In QueryRenderer you need to set the property LoadingComponent.
 
+## IndexedDB
+
+localStorage is used as the default react web persistence, while AsyncStorage is used for react-native.
+
+To use persistence via IndexedDB:
+
+```
+import OfflineStore from 'react-relay-offline/lib/runtime/redux/OfflineStoreIDB'
+```
+
+## OfflineStore
+
+It is possible to customize the offline store through these parameters:
+
+* storage: any
+* keyPrefix: string
+* customWhitelist: string[]
+* serialize: boolean
+* customReducers: ReducersMapObject
+
+
+## QueryRenderer
+
+* Add "LoadingComponent" property
+* Add "cached" property in render function
+
+```
+<QueryRenderer
+        environment={environment}
+        query={query}
+        variables={{}}
+        LoadingComponent={<Loading />}
+        render={({ props, error, retry, cached }) => {
+```
+
+
 ## Requirement
 
 * Version 3.0.0 or 4.0.0 of the react-relay library

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-relay-offline",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "keywords": [
     "graphql",
     "relay",
-    "offline"
+    "offline",
+    "react"
   ],
   "main": "lib/index.js",
   "license": "SEE LICENSE IN LICENSE",

src/QueryRenderer.tsx

@@ -41,6 +41,7 @@ export type RenderProps = {
   error: Error,
   props: Object,
   retry: () => void,
+  cached?: boolean
 };
 
 export interface Props {
@@ -300,6 +301,7 @@ function fetchQueryAndComputeStateFromProps(
       }
     }
 
+    var cached = false;
     try {
       const dataFrom = props.dataFrom || genericEnvironment.getDataFrom();
       const storeSnapshot =
@@ -308,7 +310,9 @@ function fetchQueryAndComputeStateFromProps(
           offline
           ? queryFetcher.lookupInStore(genericEnvironment, operation)
           : null;
-      const cached = (offline || (dataFrom === CACHE_FIRST && storeSnapshot && !(storeSnapshot as any).expired));
+      cached = (
+        offline || //TODO to be evaluated ( offline && storeSnapshot)
+        (dataFrom === CACHE_FIRST && storeSnapshot && !(storeSnapshot as any).expired));
       if (!cached) {
         queryFetcher.resetCacheSelectionReference();
       }
@@ -335,7 +339,7 @@ function fetchQueryAndComputeStateFromProps(
         return {
           error: null,
           relayContext,
-          renderProps: getLoadingRenderProps(),
+          renderProps: {...getLoadingRenderProps(), cached},
           snapshot: null,
           requestCacheKey,
           cached
@@ -350,7 +354,8 @@ function fetchQueryAndComputeStateFromProps(
           null,
           snapshot,
           queryFetcher,
-          retryCallbacks
+          retryCallbacks,
+          cached
         ),
         cached,
         snapshot,
@@ -409,10 +414,12 @@ function getRenderProps(
   snapshot: Snapshot,
   queryFetcher: QueryFetcherOriginal,
   retryCallbacks: RetryCallbacks,
+  cached: boolean = false,
 ): RenderProps {
   return {
     error: error ? error : null,
     props: snapshot ? snapshot.data : null,
+    cached: cached,
     retry: () => {
       const syncSnapshot = queryFetcher.retry();
       if (

src/index.ts

@@ -4,4 +4,4 @@ export {default as QueryRenderer} from "./QueryRendererOffline";
 export {default as Environment} from './runtime/RelayModernEnvironment';
 export {default as Store} from './runtime/Store';
 export {default as RecordSource} from './runtime/RecordSource';
-export {default as OfflineStore} from './runtime/redux/Store';
+export {default as OfflineStore} from './runtime/redux/OfflineStore';

src/runtime/RecordSource.ts

@@ -2,7 +2,7 @@ import { Store, Action } from 'redux';
 import {Record} from 'relay-runtime/lib/RelayCombinedEnvironmentTypes';
 import * as RelayRecordState from 'relay-runtime/lib/RelayRecordState';
 import {MutableRecordSource} from 'relay-runtime/lib/RelayStoreTypes';
-import { RelayCache, NORMALIZED_CACHE_KEY, writeThunk, WRITE_CACHE_ACTION } from "./redux/Store";
+import { RelayCache, NORMALIZED_CACHE_KEY, writeThunk, WRITE_CACHE_ACTION } from "./redux/OfflineStore";
 
 const {EXISTENT, NONEXISTENT, UNKNOWN} = RelayRecordState;
 

src/runtime/Store.ts

@@ -1,7 +1,7 @@
 import {Store, RecordSource} from 'relay-runtime'
 
 import { Store as StoreRedux, Action } from 'redux';
-import { WRITE_ROOT_ACTION, NORMALIZED_ROOTS_KEY, RelayCache, writeThunk, } from './redux/Store';
+import { WRITE_ROOT_ACTION, NORMALIZED_ROOTS_KEY, RelayCache, writeThunk, } from './redux/OfflineStore';
 import {
   MutableRecordSource,
   Scheduler,