Merge pull request #436 from wodCZ/fix/storage-wrapper-typings

fix(types): provide simplistic storage interfaces

Author: wtrocki

examples/react-native/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@apollo/client": "^3.3.6",
     "@react-native-async-storage/async-storage": "^1.13.2",
-    "apollo3-cache-persist": "^0.10.0",
+    "apollo3-cache-persist": "../../lib",
     "graphql": "^15.4.0",
     "react": "16.13.1",
     "react-native": "0.63.4",

examples/react-native/src/hooks/useApolloClient.ts

@@ -1,14 +1,14 @@
-import { useCallback, useEffect, useState } from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {
   ApolloClient,
   InMemoryCache,
   NormalizedCacheObject,
   createHttpLink,
 } from '@apollo/client';
-import { AsyncStorageWrapper, CachePersistor } from 'apollo3-cache-persist';
+import {AsyncStorageWrapper, CachePersistor} from 'apollo3-cache-persist';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-import { persistenceMapper, createPersistLink } from '../utils/persistence';
+import {persistenceMapper, createPersistLink} from '../utils/persistence';
 
 export const useApolloClient = () => {
   const [client, setClient] = useState<ApolloClient<NormalizedCacheObject>>();
@@ -27,8 +27,6 @@ export const useApolloClient = () => {
       const cache = new InMemoryCache();
       let newPersistor = new CachePersistor({
         cache,
-        // https://github.com/apollographql/apollo-cache-persist/issues/426
-        // @ts-ignore
         storage: new AsyncStorageWrapper(AsyncStorage),
         debug: __DEV__,
         trigger: 'write',
@@ -37,7 +35,7 @@ export const useApolloClient = () => {
       await newPersistor.restore();
       setPersistor(newPersistor);
       const persistLink = createPersistLink();
-      const httpLink = createHttpLink({ uri: 'https://api.spacex.land/graphql' });
+      const httpLink = createHttpLink({uri: 'https://api.spacex.land/graphql'});
       setClient(
         new ApolloClient({
           link: persistLink.concat(httpLink),

examples/react-native/src/utils/persistence/persistenceMapper.ts

@@ -1,27 +1,30 @@
-export const persistenceMapper = (data: any) => {
+export const persistenceMapper = async (data: any) => {
   const parsed = JSON.parse(data);
 
   const mapped: any = {};
   const persistEntities: any[] = [];
   const rootQuery = parsed['ROOT_QUERY'];
 
-  mapped['ROOT_QUERY'] = Object.keys(rootQuery).reduce((obj: any, key: string) => {
-    if (key === '__typename') return obj;
+  mapped['ROOT_QUERY'] = Object.keys(rootQuery).reduce(
+    (obj: any, key: string) => {
+      if (key === '__typename') return obj;
 
-    if (/@persist$/.test(key)) {
-      obj[key] = rootQuery[key];
+      if (/@persist$/.test(key)) {
+        obj[key] = rootQuery[key];
 
-      if (Array.isArray(rootQuery[key])) {
-        const entities = rootQuery[key].map((item: any) => item.__ref);
-        persistEntities.push(...entities);
-      } else {
-        const entity = rootQuery[key].__ref;
-        persistEntities.push(entity);
+        if (Array.isArray(rootQuery[key])) {
+          const entities = rootQuery[key].map((item: any) => item.__ref);
+          persistEntities.push(...entities);
+        } else {
+          const entity = rootQuery[key].__ref;
+          persistEntities.push(entity);
+        }
       }
-    }
 
-    return obj;
-  }, { __typename: 'Query' });
+      return obj;
+    },
+    {__typename: 'Query'},
+  );
 
   persistEntities.reduce((obj, key) => {
     obj[key] = parsed[key];

examples/react-native/yarn.lock

@@ -1570,10 +1570,8 @@ anymatch@^3.0.3:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apollo3-cache-persist@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/apollo3-cache-persist/-/apollo3-cache-persist-0.10.0.tgz#8dd186818898bd433a9952fe4055adf3f4fb16a4"
-  integrity sha512-3W558cKQ9OymUaLMD3Mv8FuUmIDu/GP6aJA+5iLH6fw5MxG4dwF09fFz8NBHn/qfa/zrxv8AtDzKehZUPm107A==
+apollo3-cache-persist@../../lib:
+  version "0.0.0"
 
 argparse@^1.0.7:
   version "1.0.10"

src/storageWrappers/AsyncStorageWrapper.ts

@@ -12,23 +12,29 @@ import { PersistentStorage } from '../types';
  * });
  *
  */
-export class AsyncStorageWrapper implements PersistentStorage<string> {
-  // Actual type definition: https://github.com/react-native-async-storage/async-storage/blob/master/types/index.d.ts
+export class AsyncStorageWrapper implements PersistentStorage<string | null> {
   private storage;
 
-  constructor(storage: any) {
+  constructor(storage: AsyncStorageInterface) {
     this.storage = storage;
   }
 
-  getItem(key: string): string | Promise<string | null> | null {
+  getItem(key: string): Promise<string | null> {
     return this.storage.getItem(key);
   }
 
-  removeItem(key: string): void | Promise<void> {
+  removeItem(key: string): Promise<void> {
     return this.storage.removeItem(key);
   }
 
-  setItem(key: string, value: string): void | Promise<void> {
+  setItem(key: string, value: string | null): Promise<void> {
     return this.storage.setItem(key, value);
   }
 }
+
+interface AsyncStorageInterface {
+  // Actual type definition: https://github.com/react-native-async-storage/async-storage/blob/master/types/index.d.ts
+  getItem(key: string): Promise<string | null>;
+  setItem(key: string, value: string | null): Promise<void>;
+  removeItem(key: string): Promise<void>;
+}

src/storageWrappers/IonicStorageWrapper.ts

@@ -1,22 +1,28 @@
 import { PersistentStorage } from '../types';
 
-export class IonicStorageWrapper implements PersistentStorage<string> {
-  // Actual type definition: https://github.com/ionic-team/ionic-storage/blob/main/src/storage.ts#L102
+export class IonicStorageWrapper implements PersistentStorage<string | null> {
   private storage;
 
-  constructor(storage: any) {
+  constructor(storage: IonicStorageInterface) {
     this.storage = storage;
   }
 
-  getItem(key: string): string | Promise<string | null> | null {
+  getItem(key: string): Promise<string | null> {
     return this.storage.get(key);
   }
 
-  removeItem(key: string): void | Promise<void> {
+  removeItem(key: string): Promise<void> {
     return this.storage.remove(key);
   }
 
-  setItem(key: string, value: string): void | Promise<void> {
+  setItem(key: string, value: string | null): Promise<void> {
     return this.storage.set(key, value);
   }
 }
+
+interface IonicStorageInterface {
+  // Actual type definition: https://github.com/ionic-team/ionic-storage/blob/main/lib/src/index.ts
+  get(key: string): Promise<string | null>;
+  set(key: string, value: string | null): Promise<void>;
+  remove(key: string): Promise<void>;
+}

src/storageWrappers/LocalForageWrapper.ts

@@ -1,22 +1,22 @@
 import { PersistentStorage } from '../types';
 
-export class LocalForageWrapper implements PersistentStorage<string | object> {
-  // Actual type definition: https://github.com/localForage/localForage/blob/master/typings/localforage.d.ts#L17
+export class LocalForageWrapper
+  implements PersistentStorage<string | object | null> {
   private storage;
 
-  constructor(storage: any) {
+  constructor(storage: LocalForageInterface) {
     this.storage = storage;
   }
 
-  getItem(key: string): string | Promise<string | null> | null {
+  getItem(key: string): Promise<string | null> {
     return this.storage.getItem(key);
   }
 
-  removeItem(key: string): void | Promise<void> {
+  removeItem(key: string): Promise<void> {
     return this.storage.removeItem(key);
   }
 
-  setItem(key: string, value: string): void | Promise<void> {
+  setItem(key: string, value: string | object | null): Promise<void> {
     return new Promise((resolve, reject) => {
       this.storage
         .setItem(key, value)
@@ -25,3 +25,10 @@ export class LocalForageWrapper implements PersistentStorage<string | object> {
     });
   }
 }
+
+interface LocalForageInterface {
+  // Actual type definition: https://github.com/localForage/localForage/blob/master/typings/localforage.d.ts#L17
+  getItem(key: string): Promise<string | null>;
+  setItem(key: string, value: string | object | null): Promise<void>;
+  removeItem(key: string): Promise<void>;
+}

src/storageWrappers/LocalStorageWrapper.ts

@@ -1,22 +1,33 @@
 import { PersistentStorage } from '../types';
 
-export class LocalStorageWrapper implements PersistentStorage<string> {
-  // Actual type definition: https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L15286
+export class LocalStorageWrapper implements PersistentStorage<string | null> {
   private storage;
 
-  constructor(storage: any) {
+  constructor(storage: LocalStorageInterface) {
     this.storage = storage;
   }
 
-  getItem(key: string): string | Promise<string | null> | null {
+  getItem(key: string): string | null {
     return this.storage.getItem(key);
   }
 
-  removeItem(key: string): void | Promise<void> {
+  removeItem(key: string): void {
     return this.storage.removeItem(key);
   }
 
-  setItem(key: string, value: string): void | Promise<void> {
-    return this.storage.setItem(key, value);
+  setItem(key: string, value: string | null): void {
+    if (value !== null) {
+      // setting null to localstorage stores "null" as string
+      return this.storage.setItem(key, value);
+    } else {
+      return this.removeItem(key);
+    }
   }
 }
+
+interface LocalStorageInterface {
+  // Actual type definition: https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts#L14276
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}

src/storageWrappers/MMKVStorageWrapper.ts

@@ -11,28 +11,30 @@ import { PersistentStorage } from '../types';
  * });
  *
  */
-export class MMKVStorageWrapper implements PersistentStorage<string> {
-  // Actual type definition: https://github.com/ammarahm-ed/react-native-mmkv-storage/blob/master/index.d.ts#L27
+export class MMKVStorageWrapper
+  implements PersistentStorage<string | null | undefined> {
   private storage;
 
-  constructor(storage: any) {
+  constructor(storage: MMKVStorageInterface) {
     this.storage = storage;
   }
 
-  getItem(key: string): string | Promise<string | null> | null {
+  getItem(key: string): Promise<string | null | undefined> {
     return this.storage.getItem(key);
   }
 
-  removeItem(key: string): void | Promise<void> {
+  removeItem(key: string): Promise<void> {
     return new Promise((resolve, reject) => {
-      this.storage
-        .removeItem(key)
+      // Ensure the removeItem is thenable, even if it's not, by wrapping it to Promise.resolve
+      // The MMKV storage's removeItem is synchronous since 0.5.7, this Promise wrap allows backward compatibility
+      // https://stackoverflow.com/a/27746324/2078771
+      Promise.resolve(this.storage.removeItem(key))
         .then(() => resolve())
         .catch(() => reject());
     });
   }
 
-  setItem(key: string, value: string): void | Promise<void> {
+  setItem(key: string, value: string | null | undefined): Promise<void> {
     return new Promise((resolve, reject) => {
       this.storage
         .setItem(key, value)
@@ -41,3 +43,10 @@ export class MMKVStorageWrapper implements PersistentStorage<string> {
     });
   }
 }
+
+interface MMKVStorageInterface {
+  // Actual type definition: https://github.com/ammarahm-ed/react-native-mmkv-storage/blob/master/index.d.ts#L27
+  getItem(key: string): Promise<string | null | undefined>;
+  setItem(key: string, value: string): Promise<boolean | undefined>;
+  removeItem(key: string): boolean | undefined | Promise<boolean | undefined>;
+}

src/storageWrappers/SessionStorageWrapper.ts

@@ -1,22 +1,33 @@
 import { PersistentStorage } from '../types';
 
-export class SessionStorageWrapper implements PersistentStorage<string> {
-  // Actual type definition: https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L15286
+export class SessionStorageWrapper implements PersistentStorage<string | null> {
   private storage;
 
-  constructor(storage: any) {
+  constructor(storage: SessionStorageInterface) {
     this.storage = storage;
   }
 
-  getItem(key: string): string | Promise<string | null> | null {
+  getItem(key: string): string | null {
     return this.storage.getItem(key);
   }
 
-  removeItem(key: string): void | Promise<void> {
+  removeItem(key: string): void {
     return this.storage.removeItem(key);
   }
 
-  setItem(key: string, value: string): void | Promise<void> {
-    return this.storage.setItem(key, value);
+  setItem(key: string, value: string | null): void {
+    if (value !== null) {
+      // setting null to sessionstorage stores "null" as string
+      return this.storage.setItem(key, value);
+    } else {
+      return this.removeItem(key);
+    }
   }
 }
+
+interface SessionStorageInterface {
+  // Actual type definition: https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts#L14276
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}