react-redux-cache 0.21.0 → 0.22.1

package/README.md

@@ -21,9 +21,9 @@ Can be considered as `ApolloClient` for protocols other than `GraphQL`, but with
 |Supports all kinds of queries / mutations|REST, GraphQL, databases - any async operations can be cached.|
 |Fully typed|Written on TypeScript, everything is checked by compiler.|
 |Not overengineered|Simplicity is the main goal.|
-|Performance|Every function is heavily optimized, Immer is not used ([RTK [Query] issue](https://github.com/reduxjs/redux-toolkit/issues/4793)).|
+|Performance|Every function is heavily optimized. Immer is not used ([RTK performance issue](https://github.com/reduxjs/redux-toolkit/issues/4793)). Supports mutable collections (O(n) > O(1)).|
 |Reliability|High test coverage, zero issue policy.|
-|Lightweight|`npx minified-size dist/esm/*.js`<br/>minified: 18.2 kB<br/>gzipped: 7.91 kB<br/>brotlied: 7.03 kB
+|Lightweight|`npx minified-size dist/esm/*.js`<br/>minified: 19.1 kB<br/>gzipped: 8.29 kB<br/>brotlied: 7.41 kB
 
 |Feature|Description|
 |--|--|
@@ -35,6 +35,7 @@ Can be considered as `ApolloClient` for protocols other than `GraphQL`, but with
 |Fetch policies|Decide if data is full enough or need to be fetched.|
 |Normalization|Consistent state accross the app - better UX, minimum loading states and lower traffic consumption.|
 |Minimal state|Default values such as `undefined` or default query states are removed from the state tree.|
+|BETA: Mutable collections|Optimizes state merges from O(n) to O(1) by using mutable collections. Separate entities, query and mutation states are still immutable.|
 
 #### Examples of states, generated by cache reducer from `/example` project:
 <details>
@@ -140,6 +141,7 @@ Can be considered as `ApolloClient` for protocols other than `GraphQL`, but with
    - [api.ts](https://github.com/gentlee/react-redux-cache#apits) 
  - [Usage](https://github.com/gentlee/react-redux-cache#usage)
  - [Advanced](https://github.com/gentlee/react-redux-cache#advanced)
+   - [Mutable collections](https://github.com/gentlee/react-redux-cache#mutable-collections)
    - [Error handling](https://github.com/gentlee/react-redux-cache#error-handling)
    - [Invalidation](https://github.com/gentlee/react-redux-cache#invalidation)
    - [Extended & custom fetch policy](https://github.com/gentlee/react-redux-cache#extended--custom-fetch-policy)
@@ -323,6 +325,38 @@ export const UserScreen = () => {
 
 ### Advanced
 
+#### Mutable collections
+
+For huge collections (> 1000 items, see benchmark) immutable approach may be a bottleneck - every merge of entity, query or mutation state is O(n). There is an option `mutableCollections` that makes it O(1) by using mutable approach when working with collections, while still keeping separate entities, query and mutation states immutable.
+
+[Benchmark](https://github.com/gentlee/react-redux-cache/blob/main/benchmark.ts) results of adding item to collection depending on collection size, in microseconds (less is better):
+    
+| Collection size | 0 | 1000 | 10000 | 100000 | 1000000 |
+|-|-|-|-|-|-|
+| immutable | 1.78 | 1.69 | 5.64 | 117.4 | 1284.6 |
+| mutable | 1.68 | 0.92 | 0.98 | 0.98 | 0.99 |
+
+Well written code should not subcribe to whole collections, so just enabling this options most of the times should not break anything. But if it is still needed, you should subscribe to both collection (it may still change e.g. when clearing state) and to its `_changeKey`.
+
+```tsx
+const Component = () => {
+  // It is usually a bad idea to subscribe to whole collections, consider using order of ids and subscribe to a single entity in each cell.
+  const allUsers = useSelector((state) => selectEntitiesByTypename(state, 'users'))
+  const allUsersChangeKey = useSelector((state) => selectEntitiesByTypename(state, 'users')._changeKey) // <-- Add this line while subscribing to collections
+
+  // For memoized components you should also pass it as extra prop to cause its re-render.
+  return <List data={allUsers} extra={allUsersChangeKey}/>
+}
+
+// Or just use existing hook.
+
+const Component = () => {
+  const allUsers = useEntitiesByTypename('users')
+
+  return <List data={allUsers} extra={allUsers._changeKey}>
+}
+```
+
 #### Error handling
 
 Queries and mutations are wrapped in try/catch, so any error will lead to cancelling of any updates to the state except loading state and the caught error. If you still want to make some state updates, or just want to use thrown errors only for unexpected cases, consider returning expected errors as a part of the result:

package/dist/cjs/createActions.js

@@ -1,65 +1,64 @@
-'use strict'
-Object.defineProperty(exports, '__esModule', {value: true})
-exports.createActions = void 0
-const utilsAndConstants_1 = require('./utilsAndConstants')
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createActions = void 0;
+const utilsAndConstants_1 = require("./utilsAndConstants");
 const createActions = (name) => {
-  const actionPrefix = `@${utilsAndConstants_1.PACKAGE_SHORT_NAME}/${name}/`
-  const updateQueryStateAndEntitiesType = `${actionPrefix}updateQueryStateAndEntities`
-  const updateQueryStateAndEntities = (queryKey, queryCacheKey, state, entityChanges) => ({
-    type: updateQueryStateAndEntitiesType,
-    queryKey,
-    queryCacheKey,
-    state,
-    entityChanges,
-  })
-  updateQueryStateAndEntities.type = updateQueryStateAndEntitiesType
-  const updateMutationStateAndEntitiesType = `${actionPrefix}updateMutationStateAndEntities`
-  const updateMutationStateAndEntities = (mutationKey, state, entityChanges) => ({
-    type: updateMutationStateAndEntitiesType,
-    mutationKey,
-    state,
-    entityChanges,
-  })
-  updateMutationStateAndEntities.type = updateMutationStateAndEntitiesType
-  const mergeEntityChangesType = `${actionPrefix}mergeEntityChanges`
-  const mergeEntityChanges = (changes) => ({
-    type: mergeEntityChangesType,
-    changes,
-  })
-  mergeEntityChanges.type = mergeEntityChangesType
-  const invalidateQueryType = `${actionPrefix}invalidateQuery`
-  const invalidateQuery = (queries) => ({
-    type: invalidateQueryType,
-    queries,
-  })
-  invalidateQuery.type = invalidateQueryType
-  const clearQueryStateType = `${actionPrefix}clearQueryState`
-  const clearQueryState = (queries) => ({
-    type: clearQueryStateType,
-    queries,
-  })
-  clearQueryState.type = clearQueryStateType
-  const clearMutationStateType = `${actionPrefix}clearMutationState`
-  const clearMutationState = (mutationKeys) => ({
-    type: clearMutationStateType,
-    mutationKeys,
-  })
-  clearMutationState.type = clearMutationStateType
-  const clearCacheType = `${actionPrefix}clearCache`
-  const clearCache = (stateToKeep) => ({
-    type: clearCacheType,
-    stateToKeep,
-  })
-  clearCache.type = clearCacheType
-  return {
-    updateQueryStateAndEntities,
-    updateMutationStateAndEntities,
-    mergeEntityChanges,
-    invalidateQuery,
-    clearQueryState,
-    clearMutationState,
-    clearCache,
-  }
-}
-exports.createActions = createActions
+    const actionPrefix = `@${utilsAndConstants_1.PACKAGE_SHORT_NAME}/${name}/`;
+    const updateQueryStateAndEntitiesType = `${actionPrefix}updateQueryStateAndEntities`;
+    const updateQueryStateAndEntities = (queryKey, queryCacheKey, state, entityChanges) => ({
+        type: updateQueryStateAndEntitiesType,
+        queryKey,
+        queryCacheKey,
+        state,
+        entityChanges,
+    });
+    updateQueryStateAndEntities.type = updateQueryStateAndEntitiesType;
+    const updateMutationStateAndEntitiesType = `${actionPrefix}updateMutationStateAndEntities`;
+    const updateMutationStateAndEntities = (mutationKey, state, entityChanges) => ({
+        type: updateMutationStateAndEntitiesType,
+        mutationKey,
+        state,
+        entityChanges,
+    });
+    updateMutationStateAndEntities.type = updateMutationStateAndEntitiesType;
+    const mergeEntityChangesType = `${actionPrefix}mergeEntityChanges`;
+    const mergeEntityChanges = (changes) => ({
+        type: mergeEntityChangesType,
+        changes,
+    });
+    mergeEntityChanges.type = mergeEntityChangesType;
+    const invalidateQueryType = `${actionPrefix}invalidateQuery`;
+    const invalidateQuery = (queries) => ({
+        type: invalidateQueryType,
+        queries,
+    });
+    invalidateQuery.type = invalidateQueryType;
+    const clearQueryStateType = `${actionPrefix}clearQueryState`;
+    const clearQueryState = (queries) => ({
+        type: clearQueryStateType,
+        queries,
+    });
+    clearQueryState.type = clearQueryStateType;
+    const clearMutationStateType = `${actionPrefix}clearMutationState`;
+    const clearMutationState = (mutationKeys) => ({
+        type: clearMutationStateType,
+        mutationKeys,
+    });
+    clearMutationState.type = clearMutationStateType;
+    const clearCacheType = `${actionPrefix}clearCache`;
+    const clearCache = (stateToKeep) => ({
+        type: clearCacheType,
+        stateToKeep,
+    });
+    clearCache.type = clearCacheType;
+    return {
+        updateQueryStateAndEntities,
+        updateMutationStateAndEntities,
+        mergeEntityChanges,
+        invalidateQuery,
+        clearQueryState,
+        clearMutationState,
+        clearCache,
+    };
+};
+exports.createActions = createActions;

package/dist/cjs/createCache.js

@@ -1,206 +1,134 @@
-'use strict'
-Object.defineProperty(exports, '__esModule', {value: true})
-exports.createCache = exports.withTypenames = void 0
-const react_1 = require('react')
-const createActions_1 = require('./createActions')
-const createReducer_1 = require('./createReducer')
-const createSelectors_1 = require('./createSelectors')
-const mutate_1 = require('./mutate')
-const query_1 = require('./query')
-const useMutation_1 = require('./useMutation')
-const useQuery_1 = require('./useQuery')
-const utilsAndConstants_1 = require('./utilsAndConstants')
-
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCache = exports.withTypenames = void 0;
+const react_1 = require("react");
+const createActions_1 = require("./createActions");
+const createReducer_1 = require("./createReducer");
+const createSelectors_1 = require("./createSelectors");
+const mutate_1 = require("./mutate");
+const query_1 = require("./query");
+const useMutation_1 = require("./useMutation");
+const useQuery_1 = require("./useQuery");
+const utilsAndConstants_1 = require("./utilsAndConstants");
 const withTypenames = () => {
-  return {
-    createCache: (partialCache) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m
-      var _o, _p, _q, _r, _s, _t
-      const abortControllers = new WeakMap()
-      ;(_a = partialCache.options) !== null && _a !== void 0 ? _a : (partialCache.options = {})
-      ;(_b = (_o = partialCache.options).logsEnabled) !== null && _b !== void 0
-        ? _b
-        : (_o.logsEnabled = false)
-      ;(_c = (_p = partialCache.options).additionalValidation) !== null && _c !== void 0
-        ? _c
-        : (_p.additionalValidation = utilsAndConstants_1.IS_DEV)
-      ;(_d = (_q = partialCache.options).deepComparisonEnabled) !== null && _d !== void 0
-        ? _d
-        : (_q.deepComparisonEnabled = true)
-      ;(_e = partialCache.globals) !== null && _e !== void 0 ? _e : (partialCache.globals = {})
-      ;(_f = (_r = partialCache.globals).queries) !== null && _f !== void 0 ? _f : (_r.queries = {})
-      ;(_g = (_s = partialCache.globals.queries).fetchPolicy) !== null && _g !== void 0
-        ? _g
-        : (_s.fetchPolicy = utilsAndConstants_1.FetchPolicy.NoCacheOrExpired)
-      ;(_h = (_t = partialCache.globals.queries).skipFetch) !== null && _h !== void 0
-        ? _h
-        : (_t.skipFetch = false)
-      ;(_j = partialCache.cacheStateSelector) !== null && _j !== void 0
-        ? _j
-        : (partialCache.cacheStateSelector = (state) => state[cache.name])
-      ;(_k = partialCache.mutations) !== null && _k !== void 0 ? _k : (partialCache.mutations = {})
-      ;(_l = partialCache.queries) !== null && _l !== void 0 ? _l : (partialCache.queries = {})
-      partialCache.abortControllers = abortControllers
-      try {
-        ;(_m = partialCache.storeHooks) !== null && _m !== void 0
-          ? _m
-          : (partialCache.storeHooks = {
-              useStore: require('react-redux').useStore,
-              useSelector: require('react-redux').useSelector,
-            })
-      } catch (e) {
-        throw e
-      }
-      const cache = partialCache
-      if (cache.options.deepComparisonEnabled && !utilsAndConstants_1.optionalUtils.deepEqual) {
-        ;(0, utilsAndConstants_1.logWarn)(
-          'createCache',
-          'optional dependency for fast-deep-equal was not provided, while deepComparisonEnabled option is true'
-        )
-      }
-      const setDefaultComparer = (target) => {
-        if (
-          (target === null || target === void 0 ? void 0 : target.selectorComparer) != null &&
-          typeof target.selectorComparer === 'object'
-        ) {
-          target.selectorComparer = (0, utilsAndConstants_1.createStateComparer)(target.selectorComparer)
-        }
-      }
-      setDefaultComparer(cache.globals.queries)
-      for (const queryKey in partialCache.queries) {
-        setDefaultComparer(partialCache.queries[queryKey])
-      }
-      const selectors = Object.assign(
-        {selectCacheState: cache.cacheStateSelector},
-        (0, createSelectors_1.createSelectors)(cache)
-      )
-      const {
-        selectCacheState,
-        selectQueryState,
-        selectQueryResult,
-        selectQueryLoading,
-        selectQueryError,
-        selectQueryParams,
-        selectQueryExpiresAt,
-        selectMutationState,
-        selectMutationResult,
-        selectMutationLoading,
-        selectMutationError,
-        selectMutationParams,
-        selectEntityById,
-        selectEntities,
-        selectEntitiesByTypename,
-      } = selectors
-      const actions = (0, createActions_1.createActions)(cache.name)
-      const {
-        updateQueryStateAndEntities,
-        updateMutationStateAndEntities,
-        mergeEntityChanges,
-        invalidateQuery,
-        clearQueryState,
-        clearMutationState,
-        clearCache,
-      } = actions
-      const reducer = (0, createReducer_1.createReducer)(actions, Object.keys(cache.queries), cache.options)
-      const createClient = (store) => {
-        const client = {
-          query: (options) => {
-            var _a
-            const {query: queryKey, params} = options
-            const getCacheKey =
-              (_a = cache.queries[queryKey].getCacheKey) !== null && _a !== void 0
-                ? _a
-                : utilsAndConstants_1.defaultGetCacheKey
-            const cacheKey = getCacheKey(params)
-            return (0, query_1.query)(
-              'query',
-              store,
-              cache,
-              actions,
-              selectors,
-              queryKey,
-              cacheKey,
-              params,
-              options.secondsToLive,
-              options.onlyIfExpired,
-              options.skipFetch,
-              options.mergeResults,
-              options.onCompleted,
-              options.onSuccess,
-              options.onError
-            )
-          },
-          mutate: (options) => {
-            return (0, mutate_1.mutate)(
-              'mutate',
-              store,
-              cache,
-              actions,
-              selectors,
-              options.mutation,
-              options.params,
-              abortControllers,
-              options.onCompleted,
-              options.onSuccess,
-              options.onError
-            )
-          },
-        }
-        return client
-      }
-      return {
-        cache,
-        reducer,
-        actions: {
-          updateQueryStateAndEntities,
-          updateMutationStateAndEntities,
-          mergeEntityChanges,
-          invalidateQuery,
-          clearQueryState,
-          clearMutationState,
-          clearCache,
+    return {
+        createCache: (partialCache) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _p, _q, _r, _s, _t, _u, _v;
+            const abortControllers = new WeakMap();
+            (_a = partialCache.options) !== null && _a !== void 0 ? _a : (partialCache.options = {});
+            (_b = (_p = partialCache.options).mutableCollections) !== null && _b !== void 0 ? _b : (_p.mutableCollections = false);
+            (_c = (_q = partialCache.options).logsEnabled) !== null && _c !== void 0 ? _c : (_q.logsEnabled = false);
+            (_d = (_r = partialCache.options).additionalValidation) !== null && _d !== void 0 ? _d : (_r.additionalValidation = utilsAndConstants_1.IS_DEV);
+            (_e = (_s = partialCache.options).deepComparisonEnabled) !== null && _e !== void 0 ? _e : (_s.deepComparisonEnabled = true);
+            (_f = partialCache.globals) !== null && _f !== void 0 ? _f : (partialCache.globals = {});
+            (_g = (_t = partialCache.globals).queries) !== null && _g !== void 0 ? _g : (_t.queries = {});
+            (_h = (_u = partialCache.globals.queries).fetchPolicy) !== null && _h !== void 0 ? _h : (_u.fetchPolicy = utilsAndConstants_1.FetchPolicy.NoCacheOrExpired);
+            (_j = (_v = partialCache.globals.queries).skipFetch) !== null && _j !== void 0 ? _j : (_v.skipFetch = false);
+            (_k = partialCache.cacheStateSelector) !== null && _k !== void 0 ? _k : (partialCache.cacheStateSelector = (state) => state[cache.name]);
+            (_l = partialCache.mutations) !== null && _l !== void 0 ? _l : (partialCache.mutations = {});
+            (_m = partialCache.queries) !== null && _m !== void 0 ? _m : (partialCache.queries = {});
+            partialCache.abortControllers = abortControllers;
+            try {
+                (_o = partialCache.storeHooks) !== null && _o !== void 0 ? _o : (partialCache.storeHooks = {
+                    useStore: require('react-redux').useStore,
+                    useSelector: require('react-redux').useSelector,
+                });
+            }
+            catch (e) {
+                throw e;
+            }
+            const cache = partialCache;
+            if (cache.options.deepComparisonEnabled && !utilsAndConstants_1.optionalUtils.deepEqual) {
+                (0, utilsAndConstants_1.logWarn)('createCache', 'optional dependency for fast-deep-equal was not provided, while deepComparisonEnabled option is true');
+            }
+            const setDefaultComparer = (target) => {
+                if ((target === null || target === void 0 ? void 0 : target.selectorComparer) != null && typeof target.selectorComparer === 'object') {
+                    target.selectorComparer = (0, utilsAndConstants_1.createStateComparer)(target.selectorComparer);
+                }
+            };
+            setDefaultComparer(cache.globals.queries);
+            for (const queryKey in partialCache.queries) {
+                setDefaultComparer(partialCache.queries[queryKey]);
+            }
+            const selectors = Object.assign({ selectCacheState: cache.cacheStateSelector }, (0, createSelectors_1.createSelectors)(cache));
+            const { selectCacheState, selectQueryState, selectQueryResult, selectQueryLoading, selectQueryError, selectQueryParams, selectQueryExpiresAt, selectMutationState, selectMutationResult, selectMutationLoading, selectMutationError, selectMutationParams, selectEntityById, selectEntities, selectEntitiesByTypename, } = selectors;
+            const actions = (0, createActions_1.createActions)(cache.name);
+            const { updateQueryStateAndEntities, updateMutationStateAndEntities, mergeEntityChanges, invalidateQuery, clearQueryState, clearMutationState, clearCache, } = actions;
+            const reducer = (0, createReducer_1.createReducer)(actions, Object.keys(cache.queries), cache.options);
+            const createClient = (store) => {
+                const client = {
+                    query: (options) => {
+                        var _a;
+                        const { query: queryKey, params } = options;
+                        const getCacheKey = (_a = cache.queries[queryKey].getCacheKey) !== null && _a !== void 0 ? _a : (utilsAndConstants_1.defaultGetCacheKey);
+                        const cacheKey = getCacheKey(params);
+                        return (0, query_1.query)('query', store, cache, actions, selectors, queryKey, cacheKey, params, options.secondsToLive, options.onlyIfExpired, options.skipFetch, options.mergeResults, options.onCompleted, options.onSuccess, options.onError);
+                    },
+                    mutate: (options) => {
+                        return (0, mutate_1.mutate)('mutate', store, cache, actions, selectors, options.mutation, options.params, abortControllers, options.onCompleted, options.onSuccess, options.onError);
+                    },
+                };
+                return client;
+            };
+            return {
+                cache,
+                reducer,
+                actions: {
+                    updateQueryStateAndEntities,
+                    updateMutationStateAndEntities,
+                    mergeEntityChanges,
+                    invalidateQuery,
+                    clearQueryState,
+                    clearMutationState,
+                    clearCache,
+                },
+                selectors: {
+                    selectCacheState,
+                    selectQueryState,
+                    selectQueryResult,
+                    selectQueryLoading,
+                    selectQueryError,
+                    selectQueryParams,
+                    selectQueryExpiresAt,
+                    selectMutationState,
+                    selectMutationResult,
+                    selectMutationLoading,
+                    selectMutationError,
+                    selectMutationParams,
+                    selectEntityById,
+                    selectEntities,
+                    selectEntitiesByTypename,
+                },
+                hooks: {
+                    useClient: () => {
+                        const store = cache.storeHooks.useStore();
+                        return (0, react_1.useMemo)(() => createClient(store), [store]);
+                    },
+                    useQuery: (options) => (0, useQuery_1.useQuery)(cache, actions, selectors, options),
+                    useMutation: (options) => (0, useMutation_1.useMutation)(cache, actions, selectors, options, abortControllers),
+                    useSelectEntityById: (id, typename) => {
+                        return cache.storeHooks.useSelector((state) => selectEntityById(state, id, typename));
+                    },
+                    useEntitiesByTypename: (typename) => {
+                        if (cache.options.mutableCollections) {
+                            cache.storeHooks.useSelector((state) => { var _a; return (_a = selectEntitiesByTypename(state, typename)) === null || _a === void 0 ? void 0 : _a._changeKey; });
+                        }
+                        return cache.storeHooks.useSelector((state) => selectEntitiesByTypename(state, typename));
+                    },
+                },
+                utils: {
+                    createClient,
+                    getInitialState: () => {
+                        return reducer(undefined, utilsAndConstants_1.EMPTY_OBJECT);
+                    },
+                    applyEntityChanges: (entities, changes) => {
+                        return (0, utilsAndConstants_1.applyEntityChanges)(entities, changes, cache.options);
+                    },
+                },
+            };
         },
-        selectors: {
-          selectCacheState,
-          selectQueryState,
-          selectQueryResult,
-          selectQueryLoading,
-          selectQueryError,
-          selectQueryParams,
-          selectQueryExpiresAt,
-          selectMutationState,
-          selectMutationResult,
-          selectMutationLoading,
-          selectMutationError,
-          selectMutationParams,
-          selectEntityById,
-          selectEntities,
-          selectEntitiesByTypename,
-        },
-        hooks: {
-          useClient: () => {
-            const store = cache.storeHooks.useStore()
-            return (0, react_1.useMemo)(() => createClient(store), [store])
-          },
-          useQuery: (options) => (0, useQuery_1.useQuery)(cache, actions, selectors, options),
-          useMutation: (options) =>
-            (0, useMutation_1.useMutation)(cache, actions, selectors, options, abortControllers),
-          useSelectEntityById: (id, typename) => {
-            return cache.storeHooks.useSelector((state) => selectEntityById(state, id, typename))
-          },
-        },
-        utils: {
-          createClient,
-          getInitialState: () => {
-            return reducer(undefined, utilsAndConstants_1.EMPTY_OBJECT)
-          },
-          applyEntityChanges: (entities, changes) => {
-            return (0, utilsAndConstants_1.applyEntityChanges)(entities, changes, cache.options)
-          },
-        },
-      }
-    },
-  }
-}
-exports.withTypenames = withTypenames
-exports.createCache = (0, exports.withTypenames)().createCache
+    };
+};
+exports.withTypenames = withTypenames;
+exports.createCache = (0, exports.withTypenames)().createCache;