floppy-disk 2.0.0-alpha.2 → 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.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,
@@ -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/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,
@@ -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/package.json

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