@common-stack/mobile-stack-react 6.0.6-alpha.20 → 6.0.6-alpha.29

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

@@ -0,0 +1,35 @@
+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(err, 'Error restoring cache');
+        }
+    }
+    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(err, 'Error writing to cache');
+            }
+        });
+    }
+};export{createCache,initializeCache};

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

@@ -1,12 +1,10 @@
-import { ApolloClient } from '@apollo/client';
-import { InMemoryCache } from '@apollo/client/cache';
-import { IClientState } from '@common-stack/client-core';
+import { ApolloClient, NormalizedCacheObject, InMemoryCache } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
 interface IApolloClientParams {
     initialState?: any;
     scope: 'browser' | 'server' | 'native';
     getDataIdFromObject: (x?: any) => string;
-    clientState: IClientState;
+    clientState: any;
     isDebug: boolean;
     isDev: boolean;
     isSSR: boolean;
@@ -15,7 +13,7 @@ interface IApolloClientParams {
     logger: CdmLogger.ILogger;
 }
 export declare const createApolloClient: ({ scope, isDev, isDebug, isSSR, getDataIdFromObject, clientState, httpGraphqlURL, httpLocalGraphqlURL, initialState, logger, }: IApolloClientParams) => {
-    apolloClient: ApolloClient<any>;
+    apolloClient: ApolloClient<NormalizedCacheObject>;
     cache: InMemoryCache;
 };
 export {};

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

@@ -1,65 +1,53 @@
-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 */
+import {isBoolean,merge}from'lodash-es';import {ApolloLink,ApolloClient}from'@apollo/client/index.js';import {HttpLink}from'@apollo/client/link/http/index.js';import {BatchHttpLink}from'@apollo/client/link/batch-http/index.js';import {onError}from'@apollo/client/link/error/index.js';import {GraphQLWsLink}from'@apollo/client/link/subscriptions/index.js';import {getOperationAST}from'graphql';import {invariant}from'ts-invariant';import {RetryLink}from'@apollo/client/link/retry/index.js';import {createClient}from'graphql-ws';import fetch from'cross-fetch';import {createCache,initializeCache}from'./base-apollo-cache.js';// apolloClient.ts
 const schema = `
-
+  # Add your schema here
 `;
 const errorLink = onError(({ graphQLErrors, networkError }) => {
     if (graphQLErrors) {
-        graphQLErrors.map(({ message, locations, path }) => 
-        // tslint:disable-next-line
-        invariant.warn(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`));
+        graphQLErrors.map(({ message, locations, path }) => 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';
-    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,
+    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(e, 'Error occurred in retryLink attempt condition');
+                throw e;
+            }
+        },
     });
-    if (_apolloClient && _memoryCache) {
-        // return quickly if client is already created.
-        return {
-            apolloClient: _apolloClient,
-            cache: _memoryCache,
-        };
-    }
-    _memoryCache = cache;
+    let link;
     if (isBrowser) {
         const connectionParams = async () => {
+            logger.debug('Getting WebSocket connection parameters');
             const param = {};
             for (const connectionParam of clientState.connectionParams) {
-                merge(param, await connectionParam);
+                const result = await connectionParam();
+                merge(param, await result());
             }
             return param;
         };
-        let timedOut;
         const wsLink = new GraphQLWsLink(createClient({
             url: httpGraphqlURL.replace(/^http/, 'ws'),
             retryAttempts: 10,
@@ -68,29 +56,20 @@ const createApolloClient = ({ scope, isDev, isDebug, isSSR, getDataIdFromObject,
             keepAlive: 10000,
             connectionParams,
             on: {
-                connected: (socket) => {
-                },
+                connected: (socket) => logger.debug('WebSocket connected'),
                 error: async (error) => {
-                    logger.error(error, '[WS connectionCallback error] %j');
+                    logger.error(error, 'WebSocket connection error');
                     const promises = (clientState.connectionCallbackFuncs || []).map((func) => func(wsLink, error, {}));
                     try {
-                        await promises;
+                        await Promise.all(promises);
                     }
                     catch (err) {
-                        logger.trace('Error occurred in connectionCallback condition', err);
+                        logger.trace('Error occurred in WebSocket connection callback', err);
                         throw err;
                     }
                 },
-                // connected: (socket, payload) => {}
-                ping: () => {
-                    logger.trace('Pinged Server');
-                },
-                pong: (received) => {
-                    logger.trace('Pong received');
-                    if (received)
-                        clearTimeout(timedOut); // pong is received, clear connection close timeout
-                },
-                // inactivityTimeout: 10000,
+                ping: () => logger.trace('Ping server'),
+                pong: () => logger.trace('Pong received'),
             },
         }));
         link = ApolloLink.split(({ query, operationName }) => {
@@ -99,49 +78,42 @@ const createApolloClient = ({ scope, isDev, isDebug, isSSR, getDataIdFromObject,
             }
             const operationAST = getOperationAST(query, operationName);
             return !!operationAST && operationAST.operation === 'subscription';
-        }, wsLink, new HttpLink({
-            uri: httpGraphqlURL,
-        }));
+        }, wsLink, new HttpLink({ uri: httpGraphqlURL, credentials: 'include', fetch }));
     }
     else if (isServer) {
-        link = new BatchHttpLink({ uri: httpLocalGraphqlURL, fetch: fetch });
+        logger.debug('Creating BatchHttpLink for server');
+        link = new BatchHttpLink({
+            uri: httpLocalGraphqlURL,
+            fetch,
+            batchInterval: 200,
+            batchMax: 100,
+            credentials: 'include',
+        });
     }
     else {
-        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);
+        logger.debug('Creating HttpLink for native');
+        link = new HttpLink({ uri: httpLocalGraphqlURL, fetch, credentials: 'include' });
     }
+    const links = [errorLink, retryLink, ...(clientState.preLinks || []), link].filter(Boolean);
     const params = {
         queryDeduplication: true,
-        typeDefs: schema.concat(clientState.typeDefs),
+        typeDefs: schema.concat(clientState.typeDefs || ''),
         resolvers: clientState.resolvers,
         link: ApolloLink.from(links),
         cache,
+        credentials: 'include',
         connectToDevTools: isBrowser && (isDev || isDebug),
     };
     if (isSSR) {
         if (isBrowser) {
-            if (initialState) {
-                cache.restore(initialState);
-            }
             params.ssrForceFetchDelay = 100;
         }
         else if (isServer) {
             params.ssrMode = true;
         }
     }
-    _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 };
+    const apolloClient = new ApolloClient(params);
+    logger.debug('Created new Apollo client');
+    initializeCache({ cache, initialState, clientState, logger });
+    return { apolloClient, cache };
 };export{createApolloClient};

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,configureStore}from'@reduxjs/toolkit';import {persistReducer}from'redux-persist';// 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 */
@@ -26,17 +26,7 @@ const createReduxStore = ({ scope, isDebug, isDev, reducers, rootEpic, enhancers
     const store = configureStore({
         reducer: persistedReducer,
         middleware: (getDefaultMiddleware) => getDefaultMiddleware({
-            serializableCheck: {
-                ignoredActions: [
-                    FLUSH,
-                    REHYDRATE,
-                    PAUSE,
-                    PERSIST,
-                    PURGE,
-                    REGISTER,
-                    ...(reduxConfig?.ignoredActions || []),
-                ],
-            },
+            serializableCheck: false,
         }).concat(...middlewares),
         devTools: isDev || isDebug,
         preloadedState: initialState,

package/lib/config/client.service.d.ts

@@ -1,9 +1,9 @@
 import 'reflect-metadata';
 import { Container } from 'inversify';
-import { ApolloClient } from '@apollo/client/index.js';
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client/index.js';
 export declare const createClientContainer: (req?: any, res?: any) => {
     container: Container;
-    apolloClient: ApolloClient<any>;
+    apolloClient: ApolloClient<NormalizedCacheObject>;
     serviceFunc: () => any;
     logger: import("@cdm-logger/core/lib/interface").ILogger;
 };

package/lib/config/client.service.js

@@ -35,7 +35,7 @@ const createClientContainer = (req, res) => {
         scope: typeof window !== 'undefined' ? 'browser' : 'server',
         clientState,
         getDataIdFromObject: (result) => features.getDataIdFromObject(result),
-        initialState: typeof window !== 'undefined' ? window?.__APOLLO_STATE__ : undefined,
+        initialState: undefined,
         logger,
     });
     if (!container.isBound(ClientTypes.InMemoryCache)) {

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({}),
-    LOCAL_GRAPHQL_URL: str({}),
+    GRAPHQL_URL: str({ default: env?.GRAPHQL_URL }),
+    LOCAL_GRAPHQL_URL: str({ default: env?.GRAPHQL_URL }),
     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

@@ -1,26 +1,20 @@
-import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
+import 'reflect-metadata';
+import { EpicMiddleware } from 'redux-observable';
+import { PersistConfig } from 'redux-persist';
+import modules from '../modules';
 import history from './router-history';
+import { logger } from '../utils';
 export { history };
-export declare const epicMiddlewareFunc: (apolloClient: any, services: any, container: any) => import("redux-observable").EpicMiddleware<import("redux").Action, import("redux").Action, void, {
+interface Dependencies {
     apolloClient: any;
-    routes: any;
+    routes: ReturnType<typeof modules.getConfiguredRoutes>;
     services: any;
     container: any;
-    logger: import("@cdm-logger/core/lib/interface").ILogger;
-    config: {
-        isMobile: boolean;
-    };
-}>;
-export declare const persistConfig: {
-    key: string;
-    storage: import("@react-native-async-storage/async-storage").AsyncStorageStatic;
-    stateReconciler: typeof autoMergeLevel2;
-    transforms: any[];
-};
-/**
- * Add any reducers required for this app dirctly in to
- * `combineReducers`
- */
-export declare const createReduxStore: (history: any, apolloClient: any, services: any, container: any) => {
-    store: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    logger: typeof logger;
+    config?: any;
+}
+export declare const epicMiddlewareFunc: (apolloClient: any, services: any, container: any) => EpicMiddleware<any, any, any, Dependencies>;
+export declare const persistConfig: PersistConfig<any>;
+export declare const createReduxStore: (apolloClient: any, services: any, container: any) => {
+    store: any;
 };

package/lib/config/redux-config.js

@@ -1,4 +1,4 @@
-import storage from'@react-native-async-storage/async-storage';import autoMergeLevel2 from'redux-persist/lib/stateReconciler/autoMergeLevel2';import {createEpicMiddleware}from'redux-observable';import {REDUX_PERSIST_KEY}from'@common-stack/client-core';import {createReduxStore as createReduxStore$1}from'./base-redux-config.js';import features from'../modules.js';import {rootEpic}from'./epic-config.js';export{default as history}from'./router-history.js';import {logger}from'../utils/index.js';const epicMiddlewareFunc = (apolloClient, services, container) => createEpicMiddleware({
+import'reflect-metadata';import storage from'@react-native-async-storage/async-storage';import autoMergeLevel2 from'redux-persist/lib/stateReconciler/autoMergeLevel2';import {createEpicMiddleware}from'redux-observable';import {REDUX_PERSIST_KEY,ClientTypes}from'@common-stack/client-core';import {createReduxStore as createReduxStore$1}from'./base-redux-config.js';import features from'../modules.js';import {rootEpic}from'./epic-config.js';export{default as history}from'./router-history.js';import {logger}from'../utils/index.js';const epicMiddlewareFunc = (apolloClient, services, container) => createEpicMiddleware({
     dependencies: {
         apolloClient,
         routes: features.getConfiguredRoutes(),
@@ -6,6 +6,7 @@ import storage from'@react-native-async-storage/async-storage';import autoMergeL
         container,
         logger,
         config: {
+            loadRoot: true,
             isMobile: true,
         },
     },
@@ -16,34 +17,36 @@ const persistConfig = {
     stateReconciler: autoMergeLevel2,
     transforms: features.reduxPersistStateTransformers,
 };
-/**
- * Add any reducers required for this app dirctly in to
- * `combineReducers`
- */
-const createReduxStore = (history, apolloClient, services, container) => {
-    // middleware
-    const store = createReduxStore$1({
-        scope: 'browser',
-        isDebug: false,
+const createReduxStore = (apolloClient, services, container) => {
+    let store;
+    let initialState = {};
+    let middlewares = [];
+    store = createReduxStore$1({
+        scope: typeof window !== 'undefined' ? 'browser' : 'server',
+        isDebug: true,
         isDev: process.env.NODE_ENV === 'development',
-        initialState: {},
+        initialState,
         persistConfig,
-        middleware: [],
+        middleware: middlewares,
         epicMiddleware: epicMiddlewareFunc(apolloClient, services, container),
         rootEpic: rootEpic,
         reducers: { ...features.reducers },
+        reduxConfig: features.getReduxConfig(),
     });
-    if (container.isBound('ReduxStore')) {
+    logger.debug('Created new Redux store');
+    if (container.isBound(ClientTypes.ReduxStore)) {
         container
-            .rebind('ReduxStore')
+            .rebind(ClientTypes.ReduxStore)
             .toDynamicValue(() => store)
             .inRequestScope();
+        logger.debug('Rebound ReduxStore in container');
     }
     else {
         container
-            .bind('ReduxStore')
+            .bind(ClientTypes.ReduxStore)
             .toDynamicValue(() => store)
             .inRequestScope();
+        logger.debug('Bound ReduxStore in container');
     }
     return { store };
 };export{createReduxStore,epicMiddlewareFunc,persistConfig};

package/lib/load-context.mobile.d.ts

@@ -1,8 +1,8 @@
 import 'reflect-metadata';
 export declare const loadContext: () => {
     modules: import("packages/common-client-react/lib").Feature;
-    store: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store: any;
     container: import("inversify").Container;
-    apolloClient: import("@apollo/client").ApolloClient<any>;
+    apolloClient: import("@apollo/client").ApolloClient<import("@apollo/client").NormalizedCacheObject>;
     persistor: import("redux-persist").Persistor;
 };

package/lib/load-context.mobile.js

@@ -1,8 +1,8 @@
-import'reflect-metadata';import {persistStore}from'redux-persist';import features from'./modules.js';import {createReduxStore}from'./config/redux-config.js';import {createClientContainer}from'./config/client.service.js';import hist from'./config/router-history.js';/* eslint-disable @typescript-eslint/no-explicit-any */
+import'reflect-metadata';import {persistStore}from'redux-persist';import features from'./modules.js';import {createReduxStore}from'./config/redux-config.js';import {createClientContainer}from'./config/client.service.js';/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 const loadContext = () => {
     const { apolloClient: client, container, serviceFunc } = createClientContainer();
-    const { store } = createReduxStore(hist, client, serviceFunc(), container);
+    const { store } = createReduxStore(client, serviceFunc(), container);
     const persistor = persistStore(store);
     return {
         modules: features,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@common-stack/mobile-stack-react",
-    "version": "6.0.6-alpha.20",
+    "version": "6.0.6-alpha.29",
     "description": "Client Module for mobile app",
     "homepage": "https://github.com/cdmbase/fullstack-pro#readme",
     "bugs": {
@@ -32,7 +32,7 @@
         "@apollo/client": "^3.9.0",
         "@cdm-logger/client": "^9.0.3",
         "@common-stack/client-core": "6.0.6-alpha.5",
-        "@common-stack/client-react": "6.0.6-alpha.17",
+        "@common-stack/client-react": "6.0.6-alpha.29",
         "@common-stack/components-pro": "6.0.6-alpha.5",
         "@common-stack/core": "6.0.6-alpha.5",
         "@expo/vector-icons": "~13.0.0",
@@ -71,6 +71,7 @@
         "expo-status-bar": "~1.6.0",
         "expo-updates": "~0.18.19",
         "expo-web-browser": "~12.3.2",
+        "graphql": "^16.0.0",
         "graphql-ws": "^5.11.2",
         "history": "^4.10.1",
         "immutability-helper": "^3.0.1",
@@ -117,7 +118,8 @@
         "rxjs-hooks": "^0.5.2",
         "sentry-expo": "~7.1.0",
         "subscriptions-transport-ws": "0.9.18",
-        "text-encoding-polyfill": "^0.6.7"
+        "text-encoding-polyfill": "^0.6.7",
+        "ts-invariant": "^0.10.3"
     },
     "peerDependencies": {
         "@apollo/client": ">=3.0.0",
@@ -131,5 +133,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "b0f998476a168a494f5d9ec4a91f6648cfbe4c3c"
+    "gitHead": "aa66043992d4bf6bf28cc00791945d04909e56c2"
 }