floppy-disk 2.0.0-alpha.2 → 2.0.0-alpha.4

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>
     </>
   );
@@ -631,7 +663,17 @@ const useCartStore = createStore(({ set, get }) => ({
 }));
 ```
 
-You don't need to memoize the reactivity selector.
+Don't use conditional reactivity selector.
+
+```jsx
+function Cat({ isSomething }) {
+  const { age } = useCatStore(isSomething ? (state) => [state.age] : null); // ❌
+  const { age } = useCatStore((state) => (isSomething ? [state.age] : [state.isSleeping])); // ❌
+  return <div>Cat's age: {age}</div>;
+}
+```
+
+No need to memoize the reactivity selector.
 
 ```jsx
 function Cat() {
@@ -641,11 +683,12 @@ function Cat() {
 }
 ```
 
-Don't use conditional reactivity selector.
+No need to memoize the store key / query key.
 
 ```jsx
-function Cat({ isSomething }) {
-  const { age } = useCatStore(isSomething ? (state) => [state.age] : null); // ❌
-  return <div>Cat's age: {age}</div>;
+function PokemonsPage() {
+  const queryKey = useMemo(() => ({ generation: 'ii', sort: 'asc' }), []); // ❌
+  const { isLoading, data } = usePokemonsQuery(queryKey);
+  return <div>...</div>;
 }
 ```

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

@@ -21,7 +21,6 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      * You can ignore this if your query is not paginated.
      */
     fetchNextPage: () => void;
-    markAsStale: () => void;
     /**
      * Set query state (data, error, etc) to initial state.
      */
@@ -153,6 +152,14 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
         key?: TKey;
         response: TResponse;
     }) => void;
+    /**
+     * Set query state (data, error, etc) to initial state.
+     */
+    reset: () => void;
+    /**
+     * Set query state (data, error, etc) to initial state.
+     */
+    resetSpecificKey: (key?: TKey | null) => void;
     /**
      * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
      */

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,
@@ -200,7 +206,6 @@ export const createQuery = (queryFn, options = {}) => {
             fetch,
             forceFetch,
             fetchNextPage,
-            markAsStale: () => set({ responseUpdatedAt: null }),
             reset: () => set(INITIAL_QUERY_STATE),
         };
     }, (() => {
@@ -277,6 +282,15 @@ export const createQuery = (queryFn, options = {}) => {
             });
         });
     };
+    useQuery.reset = () => {
+        useQuery.getStores().forEach((store) => {
+            store.set(INITIAL_QUERY_STATE);
+        });
+    };
+    useQuery.resetSpecificKey = (key) => {
+        const store = useQuery.getStore(key);
+        store.set(INITIAL_QUERY_STATE);
+    };
     useQuery.invalidate = () => {
         useQuery.getStores().forEach((store) => {
             const { set, getSubscribers } = store;
@@ -301,6 +315,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.d.ts

@@ -21,7 +21,6 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      * You can ignore this if your query is not paginated.
      */
     fetchNextPage: () => void;
-    markAsStale: () => void;
     /**
      * Set query state (data, error, etc) to initial state.
      */
@@ -153,6 +152,14 @@ export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData =
         key?: TKey;
         response: TResponse;
     }) => void;
+    /**
+     * Set query state (data, error, etc) to initial state.
+     */
+    reset: () => void;
+    /**
+     * Set query state (data, error, etc) to initial state.
+     */
+    resetSpecificKey: (key?: TKey | null) => void;
     /**
      * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
      */

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,
@@ -203,7 +209,6 @@ const createQuery = (queryFn, options = {}) => {
             fetch,
             forceFetch,
             fetchNextPage,
-            markAsStale: () => set({ responseUpdatedAt: null }),
             reset: () => set(INITIAL_QUERY_STATE),
         };
     }, (() => {
@@ -280,6 +285,15 @@ const createQuery = (queryFn, options = {}) => {
             });
         });
     };
+    useQuery.reset = () => {
+        useQuery.getStores().forEach((store) => {
+            store.set(INITIAL_QUERY_STATE);
+        });
+    };
+    useQuery.resetSpecificKey = (key) => {
+        const store = useQuery.getStore(key);
+        store.set(INITIAL_QUERY_STATE);
+    };
     useQuery.invalidate = () => {
         useQuery.getStores().forEach((store) => {
             const { set, getSubscribers } = store;
@@ -304,6 +318,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.4",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",