react-redux-cache 0.4.3 → 0.5.0

package/README.md

@@ -15,74 +15,103 @@
 
 Can be considered as `ApolloClient` for protocols other than `GraphQL`, but with **full control** over its storage - redux store, with ability to write custom selectors, actions and reducers to manage cached state.
 
-Example of **normalized** redux state, generated by cache reducer from `/example` project:
-```js
-{
-  entities: {
-    // each typename has its own map of entities, stored by id
-    users: {
-      "0": {id: 0, bankId: "0", name: "User 0 *"},
-      "1": {id: 1, bankId: "1", name: "User 1 *"},
-      "2": {id: 2, bankId: "2", name: "User 2"},
-      "3": {id: 3, bankId: "3", name: "User 3"}
+Examples of states, generated by cache reducer from `/example` project:
+<details>
+  <summary>
+    Normalized
+  </summary>
+  
+  ```js
+  {
+    entities: {
+      // each typename has its own map of entities, stored by id
+      users: {
+        "0": {id: 0, bankId: "0", name: "User 0 *"},
+        "1": {id: 1, bankId: "1", name: "User 1 *"},
+        "2": {id: 2, bankId: "2", name: "User 2"},
+        "3": {id: 3, bankId: "3", name: "User 3"}
+      },
+      banks: {
+        "0": {id: "0", name: "Bank 0"},
+        "1": {id: "1", name: "Bank 1"},
+        "2": {id: "2", name: "Bank 2"},
+        "3": {id: "3", name: "Bank 3"}
+      }
     },
-    banks: {
-      "0": {id: "0", name: "Bank 0"},
-      "1": {id: "1", name: "Bank 1"},
-      "2": {id: "2", name: "Bank 2"},
-      "3": {id: "3", name: "Bank 3"}
-    }
-  },
-  queries: {
-    // each query has its own map of query states, stored by cache key, which is generated from query params
-    getUser: {
-      "2": {loading: false, error: undefined, result: 2},
-      "3": {loading: true}
+    queries: {
+      // each query has its own map of query states, stored by cache key, which is generated from query params
+      getUser: {
+        "2": {loading: false, error: undefined, result: 2, params: 2},
+        "3": {loading: true, params: 3}
+      },
+      getUsers: {
+        // example of paginated state under custom cache key
+        "all-pages": {
+          loading: false,
+          result: {items: [0,1,2], page: 1},
+          params: {page: 1}
+        }
+      }
     },
-    getUsers: {
-      // example of paginated state under custom cache key
-      "all-pages": {loading: false, result: {items: [0,1,2], page: 1}}
+    mutations: {
+      // each mutation has its own state as well
+      updateUser: {
+        loading: false,
+        result: 1,
+        params: {id: 1, name: "User 1 *"}
+      } 
     }
-  },
-  mutations: {
-    // each mutation has its own state as well
-    updateUser: {loading: false, result: 1} 
   }
-}
-```
+  ```
+</details>
 
-Example of **not normalized** redux state, generated by cache reducer from `/example` project:
-```js
-{
-  // entities map is used for normalization and is empty here
-  entities: {},
-  queries: {
-    // each query has its own map of query states, stored by cache key, which is generated from query params
-    getUser: {
-      "2": {loading: false, error: undefined, result: {id: 2, bank: {id: "2", name: "Bank 2"}, name: "User 2"}},
-      "3": {loading: true}
-    },
-    getUsers: {
-      // example of paginated state under custom cache key
-      "all-pages": {
-        loading: false,
-        result: {
-          items: [
-            {id: 0, bank: {id: "0", name: "Bank 0"}, name: "User 0 *"},
-            {id: 1, bank: {id: "1", name: "Bank 1"}, name: "User 1 *"},
-            {id: 2, bank: {id: "2", name: "Bank 2"}, name: "User 2"}
-          ],
-          page: 1
+<details>
+  <summary>
+    Not normalized
+  </summary>
+  
+  ```js
+  {
+    // entities map is used for normalization and is empty here
+    entities: {},
+    queries: {
+      // each query has its own map of query states, stored by cache key, which is generated from query params
+      getUser: {
+        "2": {
+          loading: false,
+          error: undefined,
+          result: {id: 2, bank: {id: "2", name: "Bank 2"}, name: "User 2"},
+          params: 2
+        },
+        "3": {loading: true, params: 3}
+      },
+      getUsers: {
+        // example of paginated state under custom cache key
+        "all-pages": {
+          loading: false,
+          result: {
+            items: [
+              {id: 0, bank: {id: "0", name: "Bank 0"}, name: "User 0 *"},
+              {id: 1, bank: {id: "1", name: "Bank 1"}, name: "User 1 *"},
+              {id: 2, bank: {id: "2", name: "Bank 2"}, name: "User 2"}
+            ],
+            page: 1
+          },
+          params: {page: 1}
         }
       }
+    },
+    mutations: {
+      // each mutation has its own state as well
+      updateUser: {
+        loading: false,
+        result: {id: 1, bank: {id: "1", name: "Bank 1"}, name: "User 1 *"},
+        params: {id: 1, name: "User 1 *"}
+      } 
     }
-  },
-  mutations: {
-    // each mutation has its own state as well
-    updateUser: {loading: false, result: {id: 1, bank: {id: "1", name: "Bank 1"}, name: "User 1 *"}} 
   }
-}
-```
+  ```
+</details>
     
 ### Table of contents
 
@@ -219,44 +248,49 @@ 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.
+#### Advanced cache policy & skip / fetch usage
 
-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:
+`cache-first` cache policy skips fetching if result is already cached, but sometimes it can't determine that we already have result in some other's query result or in normalized entities cache. In that case we can use `skip` parameter of a query:
 
 ```typescript
+export const UserScreen = () => {
+  const user = useSelectEntityById(userId, 'users')
 
-// createCache
+  const [{loading, error}] = useQuery({
+    query: 'getUser',
+    params: userId,
+    skip: !!user // we skip fetching if we already have user cached by some other query, e.g. getUsers
+  })
 
-... = createCache({
   ...
-  queries: {
-    ...
-    getUser: {
-      query: getUser,
-      resultSelector: (state, id) => state.entities.users[id]?.id, // <-- Result is selected from cached entities
-    },
-  },
-})
+}
+```
+
+We can additional check that entity is full enough:
+
+```typescript
+  skip: !!user && isFullUser(user)
+```
 
-// component
+Other approach is to set `skip: true` and manually run `fetch` when needed:
 
+```typescript
 export const UserScreen = () => {
-  ...
+  const screenIsVisible = useScreenIsVisible()
 
-  // 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({
+  const [{result, loading, error}, fetchUser] = useQuery({
     query: 'getUser',
     params: userId,
+    skip: true
   })
 
+  useEffect(() => {
+    if (screenIsVisible) {
+      fetchUser()
+    }
+  }, [screenIsVisible])
   ...
 }
-
 ```
 
 #### Infinite scroll pagination
@@ -295,11 +329,14 @@ Here is an example of `getUsers` query configuration with pagination support. Yo
 export const GetUsersScreen = () => {
   const {query} = useClient()
 
-  const [{result: usersResult, loading, error}, refetch] = useQuery({
+  const [{result: usersResult, loading, error, params}, refetch] = useQuery({
     query: 'getUsers',
     params: 1 // page
   })
 
+  const refreshing = loading && params === 1
+  const loadingNextPage = loading && !refreshing
+
   const onLoadNextPage = () => {
     const lastLoadedPage = usersResult?.page ?? 0
     query({
@@ -316,9 +353,14 @@ export const GetUsersScreen = () => {
 
   return (
     <div>
+      {refreshing && <div className="spinner" />}
       {usersResult?.items.map(renderUser)}
       <button onClick={refetch}>Refresh</button>
-      <button onClick={onLoadNextPage}>Load next page</button>
+      {loadingNextPage ? (
+        <div className="spinner" />
+      ) : (
+        <button onClick={loadNextPage}>Load next page</button>
+      )}
     </div>
   )
 }

package/dist/index.js

@@ -23,9 +23,8 @@ Object.defineProperty(exports, "defaultGetCacheKey", { enumerable: true, get: fu
 Object.defineProperty(exports, "defaultQueryMutationState", { enumerable: true, get: function () { return utilsAndConstants_1.DEFAULT_QUERY_MUTATION_STATE; } });
 // Backlog
 // ! high
-// determine refresh vs load next page
-// update readme with how to use mergeResults for invalidating / updating caches
-// try use skip for refreshing strategy?
+// useQuery refresh with params use as client.query?
+// update readme with how to use mergeResults for invalidating / updating caches?
 // optimistic response
 // make query key / cache key difference more clear in the docs, and/or rename queryKey -> query
 // ! medium
@@ -33,14 +32,12 @@ Object.defineProperty(exports, "defaultQueryMutationState", { enumerable: true,
 // type extractors from cache
 // custom useStore
 // return back deserialize selector?
-// resultSelector - return also boolean that result is full enough or make cache policy as a function
 // selector for entities by typename
 // callback option on error / success?
 // refetch queries on mutation success
 // remove query/mutation state when it finished without errors
 // deep equal entities while merging state
 // make error type generic
-// don't cache result if resultSelector set? throw error if mergeResult set with resultSelector?
 // ! low
 // access to currently loading queries and mutations?
 // add params to the state?

package/dist/query.js

@@ -15,7 +15,6 @@ const query = (logTag, store, cache, { updateQueryStateAndEntities, }, queryKey,
     var _a;
     const logsEnabled = cache.options.logsEnabled;
     const cacheStateSelector = cache.cacheStateSelector;
-    const cacheResultSelector = cache.queries[queryKey].resultSelector;
     const mergeResults = cache.queries[queryKey].mergeResults;
     const queryStateOnStart = cacheStateSelector(store.getState()).queries[queryKey][cacheKey];
     if (queryStateOnStart === null || queryStateOnStart === void 0 ? void 0 : queryStateOnStart.loading) {
@@ -49,22 +48,16 @@ const query = (logTag, store, cache, { updateQueryStateAndEntities, }, queryKey,
     const newState = {
         error: undefined,
         loading: false,
-        result: cacheResultSelector
-            ? undefined
-            : mergeResults
-                ? mergeResults(
-                // @ts-expect-error fix later
-                (_a = cacheStateSelector(store.getState()).queries[queryKey][cacheKey]) === null || _a === void 0 ? void 0 : _a.result, response, params, store)
-                : response.result,
+        result: mergeResults
+            ? mergeResults(
+            // @ts-expect-error fix later
+            (_a = cacheStateSelector(store.getState()).queries[queryKey][cacheKey]) === null || _a === void 0 ? void 0 : _a.result, response, params, store)
+            : response.result,
     };
     store.dispatch(updateQueryStateAndEntities(queryKey, cacheKey, newState, response));
     return {
         // @ts-expect-error fix types
-        result: cacheResultSelector
-            ? cacheResultSelector(cacheStateSelector(store.getState()), 
-            // @ts-expect-error fix types
-            params)
-            : newState === null || newState === void 0 ? void 0 : newState.result,
+        result: newState === null || newState === void 0 ? void 0 : newState.result,
     };
 });
 exports.query = query;

package/dist/types.d.ts

@@ -32,7 +32,7 @@ export type Cache<N extends string, T extends Typenames, QP, QR, MP, MR> = {
     } */
     typenames: T;
     queries: {
-        [QK in keyof (QP & QR)]: QK extends keyof (QP | QR) ? QueryInfo<T, QP[QK], QR[QK], ReduxCacheState<T, QP, QR, MP, MR>> : never;
+        [QK in keyof (QP & QR)]: QK extends keyof (QP | QR) ? QueryInfo<T, QP[QK], QR[QK]> : never;
     };
     mutations: {
         [MK in keyof (MP & MR)]: MK extends keyof (MP | MR) ? MutationInfo<T, MP[MK], MR[MK]> : never;
@@ -63,19 +63,13 @@ export type EntityIds<T extends Typenames> = {
     [K in keyof T]?: Key[];
 };
 export type Query<T extends Typenames, P, R> = (params: P) => Promise<QueryResponse<T, R>>;
-export type QueryInfo<T extends Typenames, P, R, S> = {
+export type QueryInfo<T extends Typenames, P, R> = {
     query: Query<T, P, R>;
     /**
      * Cache policy.
      * @default cache-first
      */
     cachePolicy?: QueryCachePolicy;
-    /**
-     * Selector for query result from redux state.
-     * Can prevent hook from doing unnecessary fetches.
-     * Needed when query result may already be in the cache, e.g. for single entity query by id.
-     * */
-    resultSelector?: (state: S, params: P) => R | undefined;
     /** Merges results before saving to the store. Default implementation is using the latest result. */
     mergeResults?: (oldResult: R | undefined, response: QueryResponse<T, R>, params: P | undefined, store: Store) => R;
     /**
@@ -89,7 +83,7 @@ export type UseQueryOptions<T extends Typenames, QP, QR, QK extends keyof (QP &
     query: QK;
     params: QK extends keyof (QP | QR) ? QP[QK] : never;
     skip?: boolean;
-} & Pick<QueryInfo<T, unknown, unknown, unknown>, 'cachePolicy'>;
+} & Pick<QueryInfo<T, unknown, unknown>, 'cachePolicy'>;
 /**
  * @param cache-first for each params key fetch is not called if cache exists.
  * @param cache-and-fetch for each params key result is taken from cache and fetch is called.

package/dist/useQuery.js

@@ -19,32 +19,18 @@ const useQuery = (cache, actions, options) => {
     const { query: queryKey, skip, params, cachePolicy = (_a = cache.queries[queryKey].cachePolicy) !== null && _a !== void 0 ? _a : 'cache-first', } = options;
     const logsEnabled = cache.options.logsEnabled;
     const getCacheKey = (_b = cache.queries[queryKey].getCacheKey) !== null && _b !== void 0 ? _b : (utilsAndConstants_1.defaultGetCacheKey);
-    const cacheResultSelector = cache.queries[queryKey].resultSelector;
     const cacheStateSelector = cache.cacheStateSelector;
     const store = (0, react_redux_1.useStore)();
     // @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
-    }, [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* () {
         return yield (0, query_1.query)('useQuery.fetch', store, cache, actions, queryKey, cacheKey, params);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }), [store, queryKey, cacheKey]);
-    const queryStateFromSelector = (_c = (0, react_redux_1.useSelector)((state) => {
+    const queryState = (_c = (0, react_redux_1.useSelector)((state) => {
         const queryState = cacheStateSelector(state).queries[queryKey][cacheKey];
         return queryState; // TODO proper type
     })) !== null && _c !== void 0 ? _c : utilsAndConstants_1.DEFAULT_QUERY_MUTATION_STATE;
-    const queryState = hasResultFromSelector
-        ? (Object.assign(Object.assign({}, queryStateFromSelector), { result: resultFromSelector }))
-        : queryStateFromSelector;
     (0, react_1.useEffect)(() => {
         if (skip) {
             logsEnabled && (0, utilsAndConstants_1.log)('useQuery.useEffect skip fetch', { skip, cacheKey });
@@ -65,7 +51,6 @@ const useQuery = (cache, actions, options) => {
         (0, utilsAndConstants_1.log)('useQuery', {
             cacheKey,
             options,
-            resultFromSelector,
             queryState,
         });
     return [

package/package.json

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