floppy-disk 2.0.0-alpha.1 → 2.0.0-alpha.3

package/README.md

@@ -32,6 +32,7 @@ import { createQuery, createMutation } from 'floppy-disk'; // 7.5 kB (gzipped: 2
   - [Advanced Concept](#advanced-concept)
 - [Stores](#stores)
 - [Query \& Mutation](#query--mutation)
+  - [Query State \& Network Fetching State](#query-state--network-fetching-state)
   - [Single Query](#single-query)
   - [Single Query with Params](#single-query-with-params)
   - [Paginated Query or Infinite Query](#paginated-query-or-infinite-query)
@@ -366,12 +367,43 @@ function Control({ catId }) {
 
 > Example: [https://codesandbox.io/.../examples/react/stores](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/stores)
 
+<br><br>
+
+<p align="center">
+  — ✨ 💾 ✨ —
+</p>
+<br>
+
 ## 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.
 
 It can dedupe multiple request, handle caching, auto-update stale data, handle retry on error, handle infinite query, and many more. With the flexibility given in `createStores`, you can extend its power according to your needs.
 
+### Query State & Network Fetching State
+
+There are 2 types of state: query (data) state & network fetching state.
+
+`status`, `isLoading`, `isSuccess`, `isError` is a query data state.  
+It has no relation with network fetching state. ⚠️  
+Here is the flow of the query data state:
+
+- Initial state when there is no data fetched.  
+  `{ status: 'loading', isLoading: true, isSuccess: false, isError: false }`
+- After data fetching:
+  - If success
+    `{ status: 'success', isLoading: false, isSuccess: true, isError: false }`
+  - If error
+    `{ status: 'error', isLoading: false, isSuccess: false, isError: true }`
+- After data fetched successfully, you will **always** get this state:  
+  `{ status: 'success', isLoading: false, isSuccess: true, isError: false }`
+  - If a refetch is fired and got error, the state would be:  
+    `{ status: 'success', isLoading: false, isSuccess: true, isError: false, isRefetchError: true }`  
+    The previouse success response will be kept.
+
+For network fetching state, we use `isWaiting`.  
+The value will be `true` if the query is called and still waiting for the response.
+
 ### Single Query
 
 ```jsx
@@ -419,7 +451,7 @@ function Actions() {
     <>
       <button onClick={fetch}>Call query if the query data is stale</button>
       <button onClick={forceFetch}>Call query</button>
-      <button onClick={markAsStale}>Invalidate query</button>
+      <button onClick={markAsStale}>Mark as stale</button>
       <button onClick={reset}>Reset query</button>
     </>
   );

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

@@ -153,7 +153,13 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
         key?: TKey;
         response: TResponse;
     }) => void;
+    /**
+     * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
+     */
     invalidate: () => void;
+    /**
+     * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
+     */
     invalidateSpecificKey: (key?: TKey | null) => void;
     /**
      * Optimistic update.

package/esm/react/create-query.js

@@ -44,6 +44,7 @@ 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 preventReplaceResponse = new Map(); // Prevent optimistic data to be replaced
     const useQuery = createStores(({ key: _key, get, set }) => {
         const key = _key;
         const getRetryProps = (error, retryCount) => {
@@ -72,8 +73,11 @@ export const createQuery = (queryFn, options = {}) => {
                     clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
+                preventReplaceResponse.set(hashKeyFn(key), false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
+                    if (preventReplaceResponse.get(hashKeyFn(key)))
+                        return;
                     responseAllPages.push(response);
                     const newPageParam = getNextPageParam(response, responseAllPages.length);
                     newPageParams.push(newPageParam);
@@ -115,9 +119,11 @@ export const createQuery = (queryFn, options = {}) => {
                             isWaiting: false,
                             isRefetching: false,
                             isRefetchError: true,
-                            data: responseAllPages.reduce((prev, response) => {
-                                return select(response, { key, data: prev });
-                            }, null),
+                            data: responseAllPages.length
+                                ? responseAllPages.reduce((prev, response) => {
+                                    return select(response, { key, data: prev });
+                                }, null)
+                                : prevState.data,
                             error,
                             errorUpdatedAt,
                             isGoingToRetry: shouldRetry,
@@ -278,16 +284,16 @@ export const createQuery = (queryFn, options = {}) => {
         });
     };
     useQuery.invalidate = () => {
-        useQuery.getAll().forEach(({ key }) => {
-            useQuery.get(key).markAsStale();
-        });
-        useQuery.getAllWithSubscriber().forEach(({ key }) => {
-            useQuery.get(key).forceFetch();
+        useQuery.getStores().forEach((store) => {
+            const { set, getSubscribers } = store;
+            set({ responseUpdatedAt: null });
+            if (getSubscribers().size > 0)
+                store.get().forceFetch();
         });
     };
     useQuery.invalidateSpecificKey = (key) => {
-        useQuery.get(key).markAsStale();
-        const { getSubscribers } = useQuery.getStore(key);
+        const { set, getSubscribers } = useQuery.getStore(key);
+        set({ responseUpdatedAt: null });
         if (getSubscribers().size > 0)
             useQuery.get(key).forceFetch();
     };
@@ -301,6 +307,7 @@ export const createQuery = (queryFn, options = {}) => {
             response: optimisticResponse,
             data: select(optimisticResponse, { key: key, data: null }),
         });
+        preventReplaceResponse.set(hashKeyFn(key), true);
         const revert = () => {
             useQuery.set(key, {
                 isOptimisticData: false,

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

@@ -25,6 +25,7 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
     subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
     getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
+    getStores: () => Map<string, InitStoreReturn<T>>;
     /**
      * Set default values inside a component.
      *

package/esm/react/create-stores.js

@@ -75,6 +75,7 @@ export const createStores = (initializer, options = {}) => {
         return store.getSubscribers();
     };
     useStores.getStore = (key) => getStore(key);
+    useStores.getStores = () => stores;
     useStores.setDefaultValues = (key, value) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useState(() => {

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

@@ -153,7 +153,13 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
         key?: TKey;
         response: TResponse;
     }) => void;
+    /**
+     * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
+     */
     invalidate: () => void;
+    /**
+     * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
+     */
     invalidateSpecificKey: (key?: TKey | null) => void;
     /**
      * Optimistic update.

package/lib/react/create-query.js

@@ -47,6 +47,7 @@ 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 preventReplaceResponse = new Map(); // Prevent optimistic data to be replaced
     const useQuery = (0, create_stores_1.createStores)(({ key: _key, get, set }) => {
         const key = _key;
         const getRetryProps = (error, retryCount) => {
@@ -75,8 +76,11 @@ const createQuery = (queryFn, options = {}) => {
                     clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
+                preventReplaceResponse.set(hashKeyFn(key), false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
+                    if (preventReplaceResponse.get(hashKeyFn(key)))
+                        return;
                     responseAllPages.push(response);
                     const newPageParam = getNextPageParam(response, responseAllPages.length);
                     newPageParams.push(newPageParam);
@@ -118,9 +122,11 @@ const createQuery = (queryFn, options = {}) => {
                             isWaiting: false,
                             isRefetching: false,
                             isRefetchError: true,
-                            data: responseAllPages.reduce((prev, response) => {
-                                return select(response, { key, data: prev });
-                            }, null),
+                            data: responseAllPages.length
+                                ? responseAllPages.reduce((prev, response) => {
+                                    return select(response, { key, data: prev });
+                                }, null)
+                                : prevState.data,
                             error,
                             errorUpdatedAt,
                             isGoingToRetry: shouldRetry,
@@ -281,16 +287,16 @@ const createQuery = (queryFn, options = {}) => {
         });
     };
     useQuery.invalidate = () => {
-        useQuery.getAll().forEach(({ key }) => {
-            useQuery.get(key).markAsStale();
-        });
-        useQuery.getAllWithSubscriber().forEach(({ key }) => {
-            useQuery.get(key).forceFetch();
+        useQuery.getStores().forEach((store) => {
+            const { set, getSubscribers } = store;
+            set({ responseUpdatedAt: null });
+            if (getSubscribers().size > 0)
+                store.get().forceFetch();
         });
     };
     useQuery.invalidateSpecificKey = (key) => {
-        useQuery.get(key).markAsStale();
-        const { getSubscribers } = useQuery.getStore(key);
+        const { set, getSubscribers } = useQuery.getStore(key);
+        set({ responseUpdatedAt: null });
         if (getSubscribers().size > 0)
             useQuery.get(key).forceFetch();
     };
@@ -304,6 +310,7 @@ const createQuery = (queryFn, options = {}) => {
             response: optimisticResponse,
             data: select(optimisticResponse, { key: key, data: null }),
         });
+        preventReplaceResponse.set(hashKeyFn(key), true);
         const revert = () => {
             useQuery.set(key, {
                 isOptimisticData: false,

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

@@ -25,6 +25,7 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
     subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
     getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
+    getStores: () => Map<string, InitStoreReturn<T>>;
     /**
      * Set default values inside a component.
      *

package/lib/react/create-stores.js

@@ -78,6 +78,7 @@ const createStores = (initializer, options = {}) => {
         return store.getSubscribers();
     };
     useStores.getStore = (key) => getStore(key);
+    useStores.getStores = () => stores;
     useStores.setDefaultValues = (key, value) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useState)(() => {

package/package.json

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