floppy-disk 1.4.0-beta.1 → 1.4.0

package/README.md

@@ -9,7 +9,7 @@ This library was highly-inspired by [Zustand](https://www.npmjs.com/package/zust
 ```js
 import { create } from 'zustand'; // 3.3 kB (gzipped: 1.5 kB)
 
-import { createStore } from 'floppy-disk'; // 1.1 kB (gzipped: 622 B) 🎉
+import { createStore } from 'floppy-disk'; // 1.3 kB (gzipped: 702 B) 🎉
 
 import {
   QueryClient,
@@ -19,13 +19,13 @@ import {
   useMutation,
 } from '@tanstack/react-query'; // 41 kB (gzipped: 11 kB)
 
-import { createQuery, createMutation } from 'floppy-disk'; // 6.4 kB (gzipped: 2.3 kB) 🎉
+import { createQuery, createMutation } from 'floppy-disk'; // 7.5 kB (gzipped: 2.6 kB) 🎉
 ```
 
 - Using Zustand & React-Query: https://demo-zustand-react-query.vercel.app/  
   👉 Total: **309.22 kB** ~ gzipped 97.66 kB
 - Using Floppy Disk: https://demo-floppy-disk.vercel.app/  
-  👉 Total: **279.63 kB** ~ gzipped 89.35 kB
+  👉 Total: **282.86 kB** ~ gzipped 90.46 kB
 
 ## Table of Contents
 
@@ -338,6 +338,7 @@ const useCatStores = createStores(
     onBeforeChangeKey: (nextKey, prevKey) => {
       console.log('Store key changed', nextKey, prevKey);
     },
+    // ... same as createStore
   },
 );
 
@@ -367,6 +368,10 @@ function Control({ catId }) {
 }
 ```
 
+> **Examples:**
+>
+> - [https://codesandbox.io/.../examples/react/stores](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/stores)
+
 ## Query & Mutation
 
 With the power of `createStores` function and a bit creativity, we can easily create a hook just like `useQuery` and `useInfiniteQuery` in [React-Query](https://tanstack.com/query) using `createQuery` function.
@@ -398,6 +403,10 @@ function SingleQuery() {
 }
 ```
 
+> **Examples:**
+>
+> - [https://codesandbox.io/.../examples/react/query](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/query)
+
 Custom reactivity:
 
 ```jsx
@@ -552,8 +561,9 @@ function PokemonListPage() {
 **Note:**
 
 - The default stale time is 3 seconds.
-- The default reactivity of a query is `(state) => [state.data, state.error]`.  
-  (For paginated query `(state) => [state.data, state.error, state.isWaitingNextPage, state.hasNextPage]`)
+- The default error retry attempt is 1 time, and retry delay is 3 seconds.
+- The default reactivity of a query is `(s) => [s.data, s.error]`.  
+  (For paginated: `(s) => [s.data, s.error, s.isWaitingNextPage, s.hasNextPage]`)
 - You can change the `defaultDeps` on `createQuery` options.
 
 ### Mutation
@@ -599,6 +609,17 @@ function Login() {
 }
 ```
 
+> **Examples:**
+>
+> - [https://codesandbox.io/.../examples/react/mutation](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/mutation)
+
+<br><br>
+
+<p align="center">
+  — ✨ 💾 ✨ —
+</p>
+<br>
+
 ## Important Notes
 
 Don't mutate.

package/esm/react/create-query.d.ts

@@ -94,6 +94,8 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
     pageParam: any;
     pageParams: any[];
     hasNextPage: boolean;
+    retryNextPageCount: number;
+    isGoingToRetryNextPage: boolean;
 };
 export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = CreateStoresOptions<TKey, QueryState<TKey, TResponse, TData, TError>> & {
     select?: (response: TResponse, state: Pick<QueryState<TKey, TResponse, TData, TError>, 'data' | 'key'>) => TData;

package/esm/react/create-query.js

@@ -29,6 +29,8 @@ const INITIAL_QUERY_STATE = {
     pageParam: undefined,
     pageParams: [undefined],
     hasNextPage: false,
+    retryNextPageCount: 0,
+    isGoingToRetryNextPage: false,
 };
 const useQueryDefaultDeps = (state) => [
     state.data,
@@ -39,13 +41,20 @@ const useQueryDefaultDeps = (state) => [
 export const createQuery = (queryFn, options = {}) => {
     const { onFirstSubscribe = noop, onSubscribe = noop, onLastUnsubscribe = noop, onBeforeChangeKey = noop, defaultDeps = useQueryDefaultDeps, select = identityFn, staleTime = DEFAULT_STALE_TIME, fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError = noop, onSettled = noop, hashKeyFn = hashStoreKey, ...createStoresOptions } = options;
     const retryTimeoutId = new Map();
+    const retryNextPageTimeoutId = new Map();
     const useQuery = createStores(({ key: _key, get, set }) => {
         const key = _key;
+        const getRetryProps = (error, retryCount) => {
+            const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
+            const shouldRetry = retryCount < maxRetryCount;
+            const delay = (typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay) || 0;
+            return { shouldRetry, delay };
+        };
         const forceFetch = () => {
             const responseAllPages = [];
             const newPageParams = [undefined];
             let pageParam = undefined;
-            const { isWaiting, isLoading, isGoingToRetry, pageParams } = get();
+            const { isWaiting, isLoading, pageParams } = get();
             if (isWaiting || enabled === false || (typeof enabled === 'function' && !enabled(key)))
                 return;
             if (isLoading)
@@ -53,11 +62,12 @@ export const createQuery = (queryFn, options = {}) => {
             else
                 set({ isWaiting: true, isRefetching: true });
             const callQuery = () => {
-                if (isGoingToRetry) {
+                if (get().isGoingToRetry) {
                     if (isLoading)
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
+                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
                 queryFn(key, stateBeforeCallQuery)
@@ -96,6 +106,7 @@ export const createQuery = (queryFn, options = {}) => {
                     .catch((error) => {
                     const prevState = get();
                     const errorUpdatedAt = Date.now();
+                    const { shouldRetry, delay } = getRetryProps(error, prevState.retryCount);
                     set(prevState.isSuccess
                         ? {
                             isWaiting: false,
@@ -106,6 +117,7 @@ export const createQuery = (queryFn, options = {}) => {
                             }, null),
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         }
@@ -114,14 +126,13 @@ export const createQuery = (queryFn, options = {}) => {
                             isError: true,
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         });
-                    const retryCount = typeof retry === 'function' ? retry(error, key) : retry;
-                    if (typeof retryCount === 'number' && prevState.retryCount < retryCount) {
-                        const delay = typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay;
+                    if (shouldRetry) {
                         retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
-                            set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
+                            set({ retryCount: prevState.retryCount + 1 });
                             callQuery();
                         }, delay));
                     }
@@ -147,7 +158,8 @@ export const createQuery = (queryFn, options = {}) => {
                 return forceFetch();
             if (isWaitingNextPage || !hasNextPage)
                 return;
-            set({ isWaitingNextPage: true });
+            set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
+            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -162,12 +174,21 @@ export const createQuery = (queryFn, options = {}) => {
                 });
             })
                 .catch((error) => {
+                const prevState = get();
+                const { shouldRetry, delay } = getRetryProps(error, prevState.retryNextPageCount);
                 set({
                     isWaitingNextPage: false,
                     isError: true,
                     error,
                     errorUpdatedAt: Date.now(),
+                    isGoingToRetryNextPage: shouldRetry,
                 });
+                if (shouldRetry) {
+                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
+                        fetchNextPage();
+                    }, delay));
+                }
             });
         };
         const setResponse = (responseSetter) => {
@@ -218,9 +239,6 @@ export const createQuery = (queryFn, options = {}) => {
             },
         };
     }, (() => {
-        const resetRetryCount = (key) => {
-            useQuery.set(key, { retryCount: 0 }, true);
-        };
         const fetchWindowFocusHandler = () => {
             useQuery.getAllWithSubscriber().forEach((state) => {
                 getDecision(fetchOnWindowFocus, state.key, {
@@ -250,8 +268,9 @@ export const createQuery = (queryFn, options = {}) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.removeEventListener('focus', fetchWindowFocusHandler);
                 }
-                resetRetryCount(state.key);
+                useQuery.set(state.key, { retryCount: 0, retryNextPageCount: 0 }, true);
                 clearTimeout(retryTimeoutId.get(hashKeyFn(state.key)));
+                clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(state.key)));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {

package/lib/react/create-query.d.ts

@@ -94,6 +94,8 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
     pageParam: any;
     pageParams: any[];
     hasNextPage: boolean;
+    retryNextPageCount: number;
+    isGoingToRetryNextPage: boolean;
 };
 export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = CreateStoresOptions<TKey, QueryState<TKey, TResponse, TData, TError>> & {
     select?: (response: TResponse, state: Pick<QueryState<TKey, TResponse, TData, TError>, 'data' | 'key'>) => TData;

package/lib/react/create-query.js

@@ -32,6 +32,8 @@ const INITIAL_QUERY_STATE = {
     pageParam: undefined,
     pageParams: [undefined],
     hasNextPage: false,
+    retryNextPageCount: 0,
+    isGoingToRetryNextPage: false,
 };
 const useQueryDefaultDeps = (state) => [
     state.data,
@@ -42,13 +44,20 @@ const useQueryDefaultDeps = (state) => [
 const createQuery = (queryFn, options = {}) => {
     const { onFirstSubscribe = utils_1.noop, onSubscribe = utils_1.noop, onLastUnsubscribe = utils_1.noop, onBeforeChangeKey = utils_1.noop, defaultDeps = useQueryDefaultDeps, select = utils_1.identityFn, staleTime = DEFAULT_STALE_TIME, fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, keepPreviousData, getNextPageParam = () => undefined, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, hashKeyFn = utils_1.hashStoreKey, ...createStoresOptions } = options;
     const retryTimeoutId = new Map();
+    const retryNextPageTimeoutId = new Map();
     const useQuery = (0, create_stores_1.createStores)(({ key: _key, get, set }) => {
         const key = _key;
+        const getRetryProps = (error, retryCount) => {
+            const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
+            const shouldRetry = retryCount < maxRetryCount;
+            const delay = (typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay) || 0;
+            return { shouldRetry, delay };
+        };
         const forceFetch = () => {
             const responseAllPages = [];
             const newPageParams = [undefined];
             let pageParam = undefined;
-            const { isWaiting, isLoading, isGoingToRetry, pageParams } = get();
+            const { isWaiting, isLoading, pageParams } = get();
             if (isWaiting || enabled === false || (typeof enabled === 'function' && !enabled(key)))
                 return;
             if (isLoading)
@@ -56,11 +65,12 @@ const createQuery = (queryFn, options = {}) => {
             else
                 set({ isWaiting: true, isRefetching: true });
             const callQuery = () => {
-                if (isGoingToRetry) {
+                if (get().isGoingToRetry) {
                     if (isLoading)
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
+                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
                 queryFn(key, stateBeforeCallQuery)
@@ -99,6 +109,7 @@ const createQuery = (queryFn, options = {}) => {
                     .catch((error) => {
                     const prevState = get();
                     const errorUpdatedAt = Date.now();
+                    const { shouldRetry, delay } = getRetryProps(error, prevState.retryCount);
                     set(prevState.isSuccess
                         ? {
                             isWaiting: false,
@@ -109,6 +120,7 @@ const createQuery = (queryFn, options = {}) => {
                             }, null),
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         }
@@ -117,14 +129,13 @@ const createQuery = (queryFn, options = {}) => {
                             isError: true,
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         });
-                    const retryCount = typeof retry === 'function' ? retry(error, key) : retry;
-                    if (typeof retryCount === 'number' && prevState.retryCount < retryCount) {
-                        const delay = typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay;
+                    if (shouldRetry) {
                         retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
-                            set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
+                            set({ retryCount: prevState.retryCount + 1 });
                             callQuery();
                         }, delay));
                     }
@@ -150,7 +161,8 @@ const createQuery = (queryFn, options = {}) => {
                 return forceFetch();
             if (isWaitingNextPage || !hasNextPage)
                 return;
-            set({ isWaitingNextPage: true });
+            set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
+            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -165,12 +177,21 @@ const createQuery = (queryFn, options = {}) => {
                 });
             })
                 .catch((error) => {
+                const prevState = get();
+                const { shouldRetry, delay } = getRetryProps(error, prevState.retryNextPageCount);
                 set({
                     isWaitingNextPage: false,
                     isError: true,
                     error,
                     errorUpdatedAt: Date.now(),
+                    isGoingToRetryNextPage: shouldRetry,
                 });
+                if (shouldRetry) {
+                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
+                        fetchNextPage();
+                    }, delay));
+                }
             });
         };
         const setResponse = (responseSetter) => {
@@ -221,9 +242,6 @@ const createQuery = (queryFn, options = {}) => {
             },
         };
     }, (() => {
-        const resetRetryCount = (key) => {
-            useQuery.set(key, { retryCount: 0 }, true);
-        };
         const fetchWindowFocusHandler = () => {
             useQuery.getAllWithSubscriber().forEach((state) => {
                 getDecision(fetchOnWindowFocus, state.key, {
@@ -253,8 +271,9 @@ const createQuery = (queryFn, options = {}) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.removeEventListener('focus', fetchWindowFocusHandler);
                 }
-                resetRetryCount(state.key);
+                useQuery.set(state.key, { retryCount: 0, retryNextPageCount: 0 }, true);
                 clearTimeout(retryTimeoutId.get(hashKeyFn(state.key)));
+                clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(state.key)));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floppy-disk",
-  "version": "1.4.0-beta.1",
+  "version": "1.4.0",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",