react-redux-cache 0.0.11 → 0.0.12

package/README.md

@@ -17,8 +17,11 @@ Usage example can be found in `example/` folder and run by `npm run example` com
    - [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)
+   - [resultSelector](https://github.com/gentlee/react-redux-cache#resultselector)
    - [Infinite scroll pagination](https://github.com/gentlee/react-redux-cache#infinite-scroll-pagination)
    - [redux-persist](https://github.com/gentlee/react-redux-cache#redux-persist)
+ - [FAQ](https://github.com/gentlee/react-redux-cache#faq)
+   - [What is cache key?](https://github.com/gentlee/react-redux-cache#what-is-cache-key)
 
 ### Installation
 `react`, `redux` and `react-redux` are peer dependencies.
@@ -138,6 +141,46 @@ export const UserScreen = () => {
 
 ### Advanced
 
+#### resultSelector
+
+By default result of a query is stored under its **cache key**, but sometimes it makes sense to take result from other queries or normalized entities.
+
+For example when single `User` entity is requested by `userId` for the first time, the entity can already be in the cache after `getUsers` query finished.
+
+For that case `resultSelector` can be used:
+
+```typescript
+
+// createCache
+
+... = createCache({
+  ...
+  queries: {
+    ...
+    getUser: {
+      query: getUser,
+      resultSelector: (state, id) => state.entities.users[id]?.id, // <-- Result is selected from cached entities
+    },
+  },
+})
+
+// component
+
+export const UserScreen = () => {
+  ...
+
+  // When screen mounts for the first time, query is not fetched
+  // and cached value is returned if user entity was already in the cache
+  const [{result, loading, error}] = useQuery({
+    query: 'getUser',
+    params: userId,
+  })
+
+  ...
+}
+
+```
+
 #### Infinite scroll pagination
 
 Here is an example of `getUsers` query configuration with pagination support. You can check full implementation in `/example` folder.
@@ -225,3 +268,28 @@ const persistedReducer = persistReducer(
   reducer
 )
 ```
+
+### FAQ
+
+#### What is cache key?
+
+**Cache key** is used for storing the query state and for performing a fetch when it changes. Queries with the same cache key share their state.
+
+Default implementation for `getCacheKey` is:
+```typescript
+export const defaultGetCacheKey = <P = unknown>(params: P): Key => {
+  switch (typeof params) {
+    case 'string':
+    case 'symbol':
+      return params
+    case 'object':
+      return JSON.stringify(params)
+    default:
+      return String(params)
+  }
+}
+```
+
+It is recommended to override it when default implementation is not optimal or when keys in params object can be sorted in random order.
+
+As example, can be overriden when implementing pagination.

package/dist/createCache.js

@@ -13,18 +13,15 @@ const utilsAndConstants_1 = require("./utilsAndConstants");
  * Creates reducer, actions and hooks for managing queries and mutations through redux cache.
  */
 const createCache = (cache) => {
-    var _a, _b, _c, _d, _e, _f;
-    var _g, _h, _j;
-    // @ts-expect-error hot
-    const hotReloadEnabled = Boolean(module === null || module === void 0 ? void 0 : module.hot);
+    var _a, _b, _c, _d, _e;
+    var _f, _g;
     const abortControllers = new WeakMap();
     // provide all optional fields
     (_a = cache.options) !== null && _a !== void 0 ? _a : (cache.options = {});
-    (_b = (_g = cache.options).logsEnabled) !== null && _b !== void 0 ? _b : (_g.logsEnabled = false);
-    (_c = (_h = cache.options).validateFunctionArguments) !== null && _c !== void 0 ? _c : (_h.validateFunctionArguments = utilsAndConstants_1.isDev);
-    (_d = (_j = cache.options).validateHookArguments) !== null && _d !== void 0 ? _d : (_j.validateHookArguments = utilsAndConstants_1.isDev && !hotReloadEnabled);
-    (_e = cache.queries) !== null && _e !== void 0 ? _e : (cache.queries = {});
-    (_f = cache.mutations) !== null && _f !== void 0 ? _f : (cache.mutations = {});
+    (_b = (_f = cache.options).logsEnabled) !== null && _b !== void 0 ? _b : (_f.logsEnabled = false);
+    (_c = (_g = cache.options).validateFunctionArguments) !== null && _c !== void 0 ? _c : (_g.validateFunctionArguments = utilsAndConstants_1.isDev);
+    (_d = cache.queries) !== null && _d !== void 0 ? _d : (cache.queries = {});
+    (_e = cache.mutations) !== null && _e !== void 0 ? _e : (cache.mutations = {});
     // @ts-expect-error for testing
     cache.abortControllers = abortControllers;
     const nonPartialCache = cache;
@@ -61,10 +58,9 @@ const createCache = (cache) => {
                 return (0, react_1.useMemo)(() => {
                     const client = {
                         query: (options) => {
-                            var _a, _b;
+                            var _a;
                             const { query: queryKey, params } = options;
-                            const getParamsKey = (_a = nonPartialCache.queries[queryKey].getParamsKey) !== null && _a !== void 0 ? _a : (utilsAndConstants_1.defaultGetParamsKey);
-                            const getCacheKey = (_b = nonPartialCache.queries[queryKey].getCacheKey) !== null && _b !== void 0 ? _b : getParamsKey;
+                            const getCacheKey = (_a = nonPartialCache.queries[queryKey].getCacheKey) !== null && _a !== void 0 ? _a : (utilsAndConstants_1.defaultGetCacheKey);
                             // @ts-expect-error fix later
                             const cacheKey = getCacheKey(params);
                             return (0, query_1.query)('query', true, store, nonPartialCache, queryKey, cacheKey, params);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { createCache } from './createCache';
 export type { ReduxCacheState } from './reducer';
 export * from './types';
-export { defaultGetParamsKey, defaultQueryMutationState } from './utilsAndConstants';
+export { defaultGetCacheKey, defaultQueryMutationState } from './utilsAndConstants';

package/dist/index.js

@@ -14,12 +14,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultQueryMutationState = exports.defaultGetParamsKey = exports.createCache = void 0;
+exports.defaultQueryMutationState = exports.defaultGetCacheKey = exports.createCache = void 0;
 var createCache_1 = require("./createCache");
 Object.defineProperty(exports, "createCache", { enumerable: true, get: function () { return createCache_1.createCache; } });
 __exportStar(require("./types"), exports);
 var utilsAndConstants_1 = require("./utilsAndConstants");
-Object.defineProperty(exports, "defaultGetParamsKey", { enumerable: true, get: function () { return utilsAndConstants_1.defaultGetParamsKey; } });
+Object.defineProperty(exports, "defaultGetCacheKey", { enumerable: true, get: function () { return utilsAndConstants_1.defaultGetCacheKey; } });
 Object.defineProperty(exports, "defaultQueryMutationState", { enumerable: true, get: function () { return utilsAndConstants_1.defaultQueryMutationState; } });
 // Backlog
 // ! high

package/dist/types.d.ts

@@ -35,12 +35,6 @@ export type CacheOptions = {
      * Default is true in dev mode.
      * */
     validateFunctionArguments: boolean;
-    /**
-     * Enables validation of package hook arguments. Recommened to enable in dev/testing mode and disable in production.
-     * Should be disabled with hot reloading.
-     * Default is true in dev mode without hot reloading.
-     * */
-    validateHookArguments: boolean;
     /**
      * Enable console logs.
      * Default is false.
@@ -73,15 +67,9 @@ export type QueryInfo<T extends Typenames, P, R, S> = {
     /** Merges results before saving to the store. */
     mergeResults?: (oldResult: R | undefined, response: QueryResponse<T, R>, params: P | undefined) => R;
     /**
-     * Params key is used for determining if parameters were changed and fetch is needed.
-     * Also used as cache key, of `getCacheKey` wasn't provided.
+     * Cache key is used for storing the query state and for performing a fetch when it changes. Queries with the same cache key share their state.
      * Default implementation uses `JSON.stringify` or `String()` depending on type.
-     * */
-    getParamsKey?: (params?: P) => Key;
-    /**
-     * Cache key is a key in redux state for caching query state.
-     * Queries with equal cache keys have the same state.
-     * Default implementation is equal to `getParamsKey`.
+     * It is recommended to override it when default implementation is not optimal or when keys in params object can be sorted in random order etc.
      * */
     getCacheKey?: (params?: P) => Key;
 };

package/dist/useMutation.js

@@ -18,21 +18,6 @@ const utilsAndConstants_1 = require("./utilsAndConstants");
 const useMutation = (cache, options, abortControllers) => {
     var _a;
     const { mutation: mutationKey } = options;
-    // Check values that should be set once.
-    // Can be removed from deps.
-    cache.options.validateHookArguments &&
-        (() => {
-            ;
-            [
-                ['cache', cache],
-                ['cache.options', cache.options],
-                ['cache.options.logsEnabled', cache.options.logsEnabled],
-                ['cacheStateSelector', cache.cacheStateSelector],
-                ['mutationKey', mutationKey],
-            ]
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                .forEach((args) => (0, utilsAndConstants_1.useAssertValueNotChanged)(...args));
-        })();
     const store = (0, react_redux_1.useStore)();
     // Using single useMemo for performance reasons
     const [mutationStateSelector, mutate, abort] = (0, react_1.useMemo)(() => {
@@ -64,9 +49,8 @@ const useMutation = (cache, options, abortControllers) => {
                 return true;
             },
         ];
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [store]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mutationKey, store]);
     // @ts-expect-error fix later
     const mutationState = (_a = (0, react_redux_1.useSelector)(mutationStateSelector)) !== null && _a !== void 0 ? _a : utilsAndConstants_1.defaultQueryMutationState;
     cache.options.logsEnabled &&

package/dist/useQuery.js

@@ -16,56 +16,27 @@ const query_1 = require("./query");
 const utilsAndConstants_1 = require("./utilsAndConstants");
 const useQuery = (cache, options) => {
     var _a, _b, _c;
-    const { query: queryKey, skip, params, cachePolicy = (_a = cache.queries[queryKey].cachePolicy) !== null && _a !== void 0 ? _a : 'cache-first', getCacheKey = cache.queries[queryKey].getCacheKey, } = options;
+    const { query: queryKey, skip, params, cachePolicy = (_a = cache.queries[queryKey].cachePolicy) !== null && _a !== void 0 ? _a : 'cache-first', getCacheKey = (_b = cache.queries[queryKey].getCacheKey) !== null && _b !== void 0 ? _b : (utilsAndConstants_1.defaultGetCacheKey), } = options;
     const logsEnabled = cache.options.logsEnabled;
-    const getParamsKey = (_b = cache.queries[queryKey].getParamsKey) !== null && _b !== void 0 ? _b : (utilsAndConstants_1.defaultGetParamsKey);
     const cacheResultSelector = cache.queries[queryKey].resultSelector;
     const cacheStateSelector = cache.cacheStateSelector;
     const store = (0, react_redux_1.useStore)();
-    // Check values that should be set once.
-    cache.options.validateHookArguments &&
-        (() => {
-            ;
-            [
-                ['store', store],
-                ['cache', cache],
-                ['cache.queries', cache.queries],
-                ['cacheStateSelector', cache.cacheStateSelector],
-                ['options.query', options.query],
-                ['queryKey', queryKey],
-                ['resultSelector', cache.queries[queryKey].resultSelector],
-                ['mergeResults', cache.queries[queryKey].mergeResults],
-                ['getParamsKey', cache.queries[queryKey].getParamsKey],
-                ['getCacheKey', cache.queries[queryKey].getCacheKey],
-            ]
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                .forEach((args) => (0, utilsAndConstants_1.useAssertValueNotChanged)(...args));
-        })();
-    const paramsKey = getParamsKey(
-    // @ts-expect-error fix later
-    params);
-    const [cacheKey, resultSelector] = (0, react_1.useMemo)(() => {
-        return [
-            // cacheKey
-            getCacheKey
-                ? // @ts-expect-error fix types later
-                    getCacheKey(params)
-                : paramsKey,
-            // resultSelector
-            cacheResultSelector &&
-                ((state) => cacheResultSelector(cacheStateSelector(state), 
-                // @ts-expect-error fix types later
-                params)),
-        ];
+    // @ts-expect-error fix types later
+    const cacheKey = getCacheKey(params);
+    const resultSelector = (0, react_1.useMemo)(() => {
+        return (cacheResultSelector &&
+            ((state) => cacheResultSelector(cacheStateSelector(state), 
+            // @ts-expect-error fix types later
+            params)));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [paramsKey]);
+    }, [cacheKey]);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const resultFromSelector = (resultSelector && (0, react_redux_1.useSelector)(resultSelector));
     const hasResultFromSelector = resultFromSelector !== undefined;
     const fetch = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
         yield (0, query_1.query)('useQuery.fetch', false, store, cache, queryKey, cacheKey, params);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }), [cacheKey, paramsKey]);
+    }), [store, queryKey, cacheKey]);
     const queryStateFromSelector = (_c = (0, react_redux_1.useSelector)((state) => {
         const queryState = cacheStateSelector(state).queries[queryKey][cacheKey];
         return queryState; // TODO proper type
@@ -75,7 +46,7 @@ const useQuery = (cache, options) => {
         : queryStateFromSelector;
     (0, react_1.useEffect)(() => {
         if (skip) {
-            logsEnabled && (0, utilsAndConstants_1.log)('useQuery.useEffect skip fetch', { skip, paramsKey });
+            logsEnabled && (0, utilsAndConstants_1.log)('useQuery.useEffect skip fetch', { skip, cacheKey });
             return;
         }
         if (queryState.result != null && cachePolicy === 'cache-first') {
@@ -88,10 +59,9 @@ const useQuery = (cache, options) => {
         }
         fetch();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [paramsKey, cachePolicy, skip]);
+    }, [cacheKey, cachePolicy, skip]);
     logsEnabled &&
         (0, utilsAndConstants_1.log)('useQuery', {
-            paramsKey,
             cacheKey,
             options,
             resultFromSelector,

package/dist/utilsAndConstants.d.ts

@@ -1,12 +1,11 @@
-import { CacheOptions, EntitiesMap, EntityChanges, Typenames } from './types';
+import { CacheOptions, EntitiesMap, EntityChanges, Key, Typenames } from './types';
 export declare const PACKAGE_SHORT_NAME = "RRC";
 export declare const isDev: boolean;
 export declare const defaultQueryMutationState: {
     readonly loading: false;
     readonly error: undefined;
 };
-export declare const defaultGetParamsKey: <P = unknown>(params: P) => string;
-export declare const useAssertValueNotChanged: (name: string, value: unknown) => void;
+export declare const defaultGetCacheKey: <P = unknown>(params: P) => Key;
 export declare const log: (tag: string, data?: unknown) => void;
 /**
  * Apply changes to the entities map.

package/dist/utilsAndConstants.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyEntityChanges = exports.log = exports.useAssertValueNotChanged = exports.defaultGetParamsKey = exports.defaultQueryMutationState = exports.isDev = exports.PACKAGE_SHORT_NAME = void 0;
-const react_1 = require("react");
+exports.applyEntityChanges = exports.log = exports.defaultGetCacheKey = exports.defaultQueryMutationState = exports.isDev = exports.PACKAGE_SHORT_NAME = void 0;
 exports.PACKAGE_SHORT_NAME = 'RRC';
 exports.isDev = (() => {
     try {
@@ -13,9 +12,10 @@ exports.isDev = (() => {
     }
 })();
 exports.defaultQueryMutationState = { loading: false, error: undefined };
-const defaultGetParamsKey = (params) => {
+const defaultGetCacheKey = (params) => {
     switch (typeof params) {
         case 'string':
+        case 'symbol':
             return params;
         case 'object':
             return JSON.stringify(params);
@@ -23,18 +23,7 @@ const defaultGetParamsKey = (params) => {
             return String(params);
     }
 };
-exports.defaultGetParamsKey = defaultGetParamsKey;
-const useAssertValueNotChanged = (name, value) => {
-    const firstMountRef = (0, react_1.useRef)(false);
-    (0, react_1.useMemo)(() => {
-        if (firstMountRef.current) {
-            throw new Error(`${name} should not be modified`);
-        }
-        firstMountRef.current = true;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-};
-exports.useAssertValueNotChanged = useAssertValueNotChanged;
+exports.defaultGetCacheKey = defaultGetCacheKey;
 const log = (tag, data) => {
     console.debug(`@${exports.PACKAGE_SHORT_NAME} [${tag}]`, data);
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "react-redux-cache",
   "author": "Alexander Danilov",
   "license": "MIT",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Powerful data fetching and caching library that supports normalization, built on top of redux",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",