@common-stack/mobile-stack-react 6.0.6-alpha.7 → 6.0.6-alpha.8

package/lib/config/base-apollo-client.d.ts

@@ -1,11 +1,12 @@
 import { ApolloClient } from '@apollo/client';
 import { InMemoryCache } from '@apollo/client/cache';
+import { IClientState } from '@common-stack/client-core';
 import { CdmLogger } from '@cdm-logger/core';
 interface IApolloClientParams {
     initialState?: any;
     scope: 'browser' | 'server' | 'native';
     getDataIdFromObject: (x?: any) => string;
-    clientState: any;
+    clientState: IClientState;
     isDebug: boolean;
     isDev: boolean;
     isSSR: boolean;

package/lib/config/base-apollo-client.js

@@ -1,5 +1,4 @@
-import {ApolloLink,ApolloClient}from'@apollo/client';import {HttpLink}from'@apollo/client/link/http';import {BatchHttpLink}from'@apollo/client/link/batch-http';import {onError}from'@apollo/client/link/error/index.js';import {GraphQLWsLink}from'@apollo/client/link/subscriptions';import {getOperationAST}from'graphql';import {invariant}from'ts-invariant';import fetch from'node-fetch';import {isBoolean,merge}from'lodash';import {RetryLink}from'@apollo/client/link/retry';import {createClient}from'graphql-ws';import {createCache,initializeCache}from'./base-apollo-cache.js';/* eslint-disable global-require */
-// version 09/18/2021
+import {ApolloLink,ApolloClient}from'@apollo/client';import {InMemoryCache}from'@apollo/client/cache';import {HttpLink,createHttpLink}from'@apollo/client/link/http';import {BatchHttpLink}from'@apollo/client/link/batch-http';import {onError}from'@apollo/client/link/error';import {GraphQLWsLink}from'@apollo/client/link/subscriptions';import {getOperationAST}from'graphql';import {invariant}from'ts-invariant';import fetch from'cross-fetch';import {isBoolean,merge}from'lodash-es';import {RetryLink}from'@apollo/client/link/retry';import {createClient}from'graphql-ws';// version 09/18/2021
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
@@ -8,50 +7,59 @@ const schema = `
 `;
 const errorLink = onError(({ graphQLErrors, networkError }) => {
     if (graphQLErrors) {
-        graphQLErrors.map(({ message, locations, path }) => invariant.warn(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`));
+        graphQLErrors.map(({ message, locations, path }) => 
+        // tslint:disable-next-line
+        invariant.warn(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`));
     }
     if (networkError) {
+        // tslint:disable-next-line
         invariant.warn(`[Network error]: ${networkError}`);
     }
 });
+let _apolloClient;
+let _memoryCache;
 const createApolloClient = ({ scope, isDev, isDebug, isSSR, getDataIdFromObject, clientState, httpGraphqlURL, httpLocalGraphqlURL, initialState, logger, }) => {
-    logger.debug('Initializing Apollo Client with parameters, {%o}', {
-        scope,
-        isDev,
-        isDebug,
-        isSSR,
-        httpGraphqlURL,
-        httpLocalGraphqlURL,
-    });
     const isBrowser = scope === 'browser';
     const isServer = scope === 'server';
-    const cache = createCache({ getDataIdFromObject, clientState, logger });
-    logger.debug('Created new Apollo memory cache');
-    const retryLink = new RetryLink({
-        attempts: async (count, operation, error) => {
-            logger.debug('Retrying link attempt', { count, operation, error });
-            const promises = (clientState.retryLinkAttemptFuncs || []).map((func) => func(count, operation, error));
-            try {
-                const result = await Promise.all(promises);
-                return !!result.find((item) => item && isBoolean(item));
-            }
-            catch (e) {
-                logger.error('Error occurred in retryLink attempt condition', e);
-                throw e;
-            }
-        },
-    });
     let link;
+    const cache = new InMemoryCache({
+        dataIdFromObject: getDataIdFromObject,
+        possibleTypes: clientState.possibleTypes,
+        typePolicies: clientState.typePolicies,
+    });
+    const attemptConditions = async (count, operation, error) => {
+        const promises = (clientState.retryLinkAttemptFuncs || []).map((func) => {
+            return func(count, operation, error);
+        });
+        try {
+            const result = await promises;
+            return !!result.find((item) => item && isBoolean(item));
+        }
+        catch (e) {
+            logger.trace('Error occured in retryLink Attempt condition', e);
+            throw e;
+        }
+    };
+    const retrylink = new RetryLink({
+        attempts: attemptConditions,
+    });
+    if (_apolloClient && _memoryCache) {
+        // return quickly if client is already created.
+        return {
+            apolloClient: _apolloClient,
+            cache: _memoryCache,
+        };
+    }
+    _memoryCache = cache;
     if (isBrowser) {
         const connectionParams = async () => {
-            logger.debug('Getting WebSocket connection parameters');
             const param = {};
             for (const connectionParam of clientState.connectionParams) {
-                const result = await connectionParam();
-                merge(param, await result());
+                merge(param, await connectionParam);
             }
             return param;
         };
+        let timedOut;
         const wsLink = new GraphQLWsLink(createClient({
             url: httpGraphqlURL.replace(/^http/, 'ws'),
             retryAttempts: 10,
@@ -60,21 +68,28 @@ const createApolloClient = ({ scope, isDev, isDebug, isSSR, getDataIdFromObject,
             keepAlive: 10000,
             connectionParams,
             on: {
-                connected: (socket) => logger.debug('WebSocket connected'),
+                connected: (socket) => {
+                },
                 error: async (error) => {
                     logger.error(error, '[WS connectionCallback error] %j');
                     const promises = (clientState.connectionCallbackFuncs || []).map((func) => func(wsLink, error, {}));
                     try {
-                        await Promise.all(promises);
+                        await promises;
                     }
                     catch (err) {
-                        logger.trace('Error occurred in WebSocket connection callback', err);
+                        logger.trace('Error occurred in connectionCallback condition', err);
                         throw err;
                     }
                 },
                 // connected: (socket, payload) => {}
-                ping: () => logger.trace('Ping sent'),
-                pong: () => logger.trace('Pong received'),
+                ping: () => {
+                    logger.trace('Pinged Server');
+                },
+                pong: (received) => {
+                    logger.trace('Pong received');
+                    if (received)
+                        clearTimeout(timedOut); // pong is received, clear connection close timeout
+                },
                 // inactivityTimeout: 10000,
             },
         }));
@@ -92,16 +107,20 @@ const createApolloClient = ({ scope, isDev, isDebug, isSSR, getDataIdFromObject,
         link = new BatchHttpLink({ uri: httpLocalGraphqlURL, fetch: fetch });
     }
     else {
-        link = new HttpLink({ uri: httpLocalGraphqlURL, fetch: fetch });
+        link = createHttpLink({ uri: httpLocalGraphqlURL, fetch: fetch });
+    }
+    const links = [errorLink, retrylink, ...(clientState.preLinks || []), link];
+    // Add apollo logger during development only
+    if (isBrowser && (isDev || isDebug)) {
+        const apolloLogger = require('apollo-link-logger');
+        links.unshift(apolloLogger.default);
     }
-    const links = [errorLink, retryLink, ...(clientState.preLinks || []), link];
     const params = {
         queryDeduplication: true,
         typeDefs: schema.concat(clientState.typeDefs),
         resolvers: clientState.resolvers,
         link: ApolloLink.from(links),
         cache,
-        credentials: 'include',
         connectToDevTools: isBrowser && (isDev || isDebug),
     };
     if (isSSR) {
@@ -115,8 +134,14 @@ const createApolloClient = ({ scope, isDev, isDebug, isSSR, getDataIdFromObject,
             params.ssrMode = true;
         }
     }
-    const apolloClient = new ApolloClient(params);
-    logger.debug('Created new Apollo client');
-    initializeCache({ cache, initialState, clientState, logger });
-    return { apolloClient, cache };
+    _apolloClient = new ApolloClient(params);
+    clientState?.defaults?.forEach((x) => {
+        if (x.type === 'query') {
+            cache.writeQuery(x);
+        }
+        else if (x.type === 'fragment') {
+            cache.writeFragment(x);
+        }
+    });
+    return { apolloClient: _apolloClient, cache };
 };export{createApolloClient};

package/lib/config/base-redux-config.d.ts

@@ -1,24 +1,22 @@
-import { Middleware, StoreEnhancer } from 'redux';
+import { Middleware, Action, ReducersMapObject, PreloadedState } from 'redux';
 import { EpicMiddleware, Epic } from 'redux-observable';
 import { PersistConfig } from 'redux-persist';
 interface IReduxStore<S = any> {
     scope: 'browser' | 'server' | 'native' | 'ElectronMain';
     isDebug: boolean;
     isDev: boolean;
-    reducers: any;
-    enhancers?: StoreEnhancer[];
-    rootEpic: Epic<any, any, any, any>;
-    epicMiddleware?: EpicMiddleware<any, any, S, any>;
+    reducers: ReducersMapObject<S>;
+    rootEpic?: Epic<Action<S>, Action<any>, void, any>;
+    epicMiddleware?: EpicMiddleware<Action<S>, Action<any>>;
     preMiddleware?: Middleware[];
     postMiddleware?: Middleware[];
     middleware?: Middleware[];
-    initialState?: any;
-    persistConfig?: PersistConfig<any>;
-    reduxConfig?: any;
+    initialState: PreloadedState<S>;
+    persistConfig?: PersistConfig<S, any>;
 }
 /**
  * Add any reducers required for this app dirctly in to
  * `combineReducers`
  */
-export declare const createReduxStore: ({ scope, isDebug, isDev, reducers, rootEpic, enhancers, epicMiddleware, preMiddleware, postMiddleware, middleware, initialState, persistConfig, reduxConfig, }: IReduxStore<any>) => import("@reduxjs/toolkit").Store<any, import("@reduxjs/toolkit").UnknownAction, unknown>;
+export declare const createReduxStore: ({ scope, isDebug, isDev, reducers, rootEpic, epicMiddleware, preMiddleware, postMiddleware, middleware, initialState, persistConfig, }: IReduxStore<any>) => import("redux").Store<any, import("redux").AnyAction>;
 export {};

package/lib/config/base-redux-config.js

@@ -1,4 +1,4 @@
-import {combineReducers,configureStore}from'@reduxjs/toolkit';import {persistReducer,FLUSH,REHYDRATE,PAUSE,PERSIST,PURGE,REGISTER}from'redux-persist';// version 11/12/2021
+import {combineReducers,createStore,applyMiddleware,compose}from'redux';import {persistReducer}from'redux-persist';import thunkMiddleware from'redux-thunk';// version 11/12/2021
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-var-requires */
@@ -8,41 +8,44 @@ import {combineReducers,configureStore}from'@reduxjs/toolkit';import {persistRed
  * Add any reducers required for this app dirctly in to
  * `combineReducers`
  */
-const createReduxStore = ({ scope, isDebug, isDev, reducers, rootEpic, enhancers = [], epicMiddleware, preMiddleware = [], postMiddleware = [], middleware = [], initialState, persistConfig, reduxConfig, }) => {
+const createReduxStore = ({ scope, isDebug, isDev, reducers, rootEpic, epicMiddleware, preMiddleware, postMiddleware, middleware, initialState = {}, persistConfig, }) => {
     const isBrowser = scope === 'browser';
     const isElectronMain = scope === 'ElectronMain';
     /**
      * Add middleware that required for this app.
      */
+    const middlewares = [thunkMiddleware];
+    // add epicMiddleware
+    if (epicMiddleware) {
+        middlewares.push(epicMiddleware);
+    }
+    if (preMiddleware) {
+        middlewares.unshift(...preMiddleware);
+    }
+    // Add redux logger during development only
+    if ((isDev || isDebug) && isBrowser) {
+        const { createLogger } = require('redux-logger');
+        middlewares.push(createLogger({
+            level: 'info',
+            collapsed: true,
+        }));
+    }
+    if (middleware) {
+        middlewares.push(...middleware);
+    }
+    if (postMiddleware) {
+        middlewares.push(...postMiddleware);
+    }
+    const enhancers = () => [applyMiddleware(...middlewares)];
+    const composeEnhancers = ((isDev || isDebug) && isBrowser && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
     const rootReducer = combineReducers(reducers);
-    const persistedReducer = persistConfig && isBrowser ? persistReducer(persistConfig, rootReducer) : rootReducer;
-    const middlewares = [
-        ...preMiddleware,
-        ...(epicMiddleware ? [epicMiddleware] : []),
-        ...middleware,
-        ...postMiddleware,
-    ];
-    const store = configureStore({
-        reducer: persistedReducer,
-        middleware: (getDefaultMiddleware) => getDefaultMiddleware({
-            serializableCheck: {
-                ignoredActions: [
-                    FLUSH,
-                    REHYDRATE,
-                    PAUSE,
-                    PERSIST,
-                    PURGE,
-                    REGISTER,
-                    ...(reduxConfig?.ignoredActions || []),
-                ],
-            },
-        }).concat(...middlewares),
-        devTools: isDev || isDebug,
-        preloadedState: initialState,
-        enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(...enhancers),
-    });
-    if ((isBrowser || isElectronMain) && epicMiddleware && rootEpic) {
-        epicMiddleware.run(rootEpic);
+    const persistedReducer = persistConfig ? persistReducer(persistConfig, rootReducer) : rootReducer;
+    const store = createStore(persistedReducer, initialState, composeEnhancers(...enhancers()));
+    if (isBrowser || isElectronMain) {
+        // no SSR for now
+        if (epicMiddleware) {
+            epicMiddleware.run(rootEpic);
+        }
     }
     return store;
 };export{createReduxStore};

package/lib/config/client.service.js

@@ -30,8 +30,8 @@ const createClientContainer = (req, res) => {
         httpGraphqlURL: config.GRAPHQL_URL,
         httpLocalGraphqlURL: config.LOCAL_GRAPHQL_URL,
         isDev: process.env.NODE_ENV === 'development',
-        isDebug: __DEBUGGING__,
-        isSSR: __SSR__,
+        isDebug: false,
+        isSSR: true,
         scope: typeof window !== 'undefined' ? 'browser' : 'server',
         clientState,
         getDataIdFromObject: (result) => features.getDataIdFromObject(result),

package/lib/config/mobile-env-config.js

@@ -1,8 +1,8 @@
 import {cleanEnv,str}from'envalid';import {getEnvironment}from'@common-stack/core';const env = getEnvironment();
 const config = cleanEnv(env, {
     GA_ID: str({ devDefault: 'G-xxxxxxx' }),
-    GRAPHQL_URL: str({ devDefault: __GRAPHQL_URL__ }),
-    LOCAL_GRAPHQL_URL: str({ default: __GRAPHQL_URL__ }),
+    GRAPHQL_URL: str({}),
+    LOCAL_GRAPHQL_URL: str({}),
     GRAPHQL_SUBSCRIPTION_URL: str({ default: env?.GRAPHQL_URL?.replace(/^http/, 'ws') }),
     LOG_LEVEL: str({ devDefault: 'debug' }),
 });export{config};

package/lib/config/redux-config.d.ts

@@ -22,5 +22,5 @@ export declare const persistConfig: {
  * `combineReducers`
  */
 export declare const createReduxStore: (history: any, apolloClient: any, services: any, container: any) => {
-    store: import("@reduxjs/toolkit").Store<any, import("@reduxjs/toolkit").UnknownAction, unknown>;
+    store: import("redux").Store<any, import("redux").AnyAction>;
 };

package/lib/config/redux-config.js

@@ -24,7 +24,7 @@ const createReduxStore = (history, apolloClient, services, container) => {
     // middleware
     const store = createReduxStore$1({
         scope: 'browser',
-        isDebug: __DEBUGGING__,
+        isDebug: false,
         isDev: process.env.NODE_ENV === 'development',
         initialState: {},
         persistConfig,

package/lib/utils/index.js

@@ -1,7 +1,6 @@
 import {ClientLogger}from'@cdm-logger/client';export{default}from'../modules.js';import {navigate}from'./navigator.js';/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable import/no-cycle */
 /* eslint-disable @typescript-eslint/no-var-requires */
-Object.assign(global, require('../../build.config'));
 class UtilityClass {
     modules;
     // tslint:disable-next-line:no-shadowed-variable

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@common-stack/mobile-stack-react",
-    "version": "6.0.6-alpha.7",
+    "version": "6.0.6-alpha.8",
     "description": "Client Module for mobile app",
     "homepage": "https://github.com/cdmbase/fullstack-pro#readme",
     "bugs": {
@@ -131,5 +131,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "054c57aa81115c5f531c5677e1e7933f8464df16"
+    "gitHead": "c1149e5c09ea4f3d84ff840b19588a1348aba561"
 }

package/lib/config/base-apollo-cache.js

@@ -1,35 +0,0 @@
-import {InMemoryCache}from'@apollo/client/cache/index.js';// cache.ts
-const createCache = ({ getDataIdFromObject, clientState }) => {
-    const cache = new InMemoryCache({
-        dataIdFromObject: getDataIdFromObject,
-        possibleTypes: clientState.possibleTypes,
-        typePolicies: clientState.typePolicies,
-    });
-    return cache;
-};
-const initializeCache = ({ cache, initialState, clientState, logger, }) => {
-    if (initialState) {
-        try {
-            cache.restore(initialState);
-            logger.debug('Cache restored with initial state');
-        }
-        catch (err) {
-            logger.error('Error restoring cache', err);
-        }
-    }
-    else {
-        clientState.defaults?.forEach((x) => {
-            try {
-                if (x.type === 'query') {
-                    cache.writeQuery({ query: x.query, data: x.data });
-                }
-                else if (x.type === 'fragment') {
-                    cache.writeFragment({ id: x.id, fragment: x.fragment, data: x.data });
-                }
-            }
-            catch (err) {
-                logger.error('Error writing to cache', err);
-            }
-        });
-    }
-};export{createCache,initializeCache};