floppy-disk 1.4.1-beta.1 → 2.0.0-alpha.1

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

@@ -1,4 +1,4 @@
-import { CreateStoresOptions, StoreKey } from './create-stores';
+import { CreateStoresOptions, StoreKey, UseStores } from './create-stores';
 export type QueryStatus = 'loading' | 'success' | 'error';
 export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = {
     /**
@@ -22,29 +22,10 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      */
     fetchNextPage: () => void;
     markAsStale: () => void;
-    reset: () => void;
     /**
-     * Set query response & data.
-     */
-    setResponse: (responseSetter: TResponse | ((state: QueryState<TKey, TResponse, TData, TError>) => TResponse)) => void;
-    helpers: {
-        /**
-         * Fetch all active queries.
-         *
-         * Same as `fetch` method, this will only be called if the data is stale or empty.
-         */
-        fetchAllActiveQueries: () => void;
-        /**
-         * Fetch all active queries.
-         *
-         * Same as `fetch` method, this will only be called if the data is stale or empty.
-         */
-        forceFetchAllActiveQueries: () => void;
-        /**
-         * Delete query data for all query keys.
-         */
-        resetAllQueries: () => void;
-    };
+     * Set query state (data, error, etc) to initial state.
+     */
+    reset: () => void;
     /**
      * Network fetching status.
      */
@@ -84,6 +65,7 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
     isRefetching: boolean;
     isRefetchError: boolean;
     isPreviousData: boolean;
+    isOptimisticData: boolean;
     data: TData | null;
     response: TResponse | null;
     responseUpdatedAt: number | null;
@@ -159,4 +141,33 @@ export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any
     onError?: (error: TError, stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError>) => void;
     onSettled?: (stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError>) => void;
 };
-export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => import("./create-stores").UseStores<TKey, QueryState<TKey, TResponse, TData, TError>>;
+export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = UseStores<TKey, QueryState<TKey, TResponse, TData, TError>> & {
+    /**
+     * Set query's initial response.
+     *
+     * This is used for server-side rendered page or static page.
+     *
+     * IMPORTANT NOTE: Put this on the root component or parent component, before any component subscribed!
+     */
+    setInitialResponse: (options: {
+        key?: TKey;
+        response: TResponse;
+    }) => void;
+    invalidate: () => void;
+    invalidateSpecificKey: (key?: TKey | null) => void;
+    /**
+     * Optimistic update.
+     *
+     * @returns function to revert the changes & function to invalidate the query
+     *
+     * IMPORTANT NOTE: This won't work well on infinite query.
+     */
+    optimisticUpdate: (options: {
+        key?: TKey | null;
+        response: TResponse | ((prevState: QueryState<TKey, TResponse, TData, TError>) => TResponse);
+    }) => {
+        revert: () => void;
+        invalidate: () => void;
+    };
+};
+export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => UseQuery<TKey, TResponse, TData, TError>;

package/esm/react/create-query.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { hashStoreKey, identityFn, noop } from '../utils';
 import { createStores } from './create-stores';
 const getDecision = (value, param, { ifTrue, ifAlways }) => {
@@ -19,6 +20,7 @@ const INITIAL_QUERY_STATE = {
     isRefetching: false,
     isRefetchError: false,
     isPreviousData: false,
+    isOptimisticData: false,
     data: null,
     response: null,
     responseUpdatedAt: null,
@@ -89,6 +91,7 @@ export const createQuery = (queryFn, options = {}) => {
                         isRefetching: false,
                         isRefetchError: false,
                         isPreviousData: false,
+                        isOptimisticData: false,
                         data: responseAllPages.reduce((prev, responseCurrentPage) => {
                             return select(responseCurrentPage, { key, data: prev });
                         }, null),
@@ -191,38 +194,6 @@ export const createQuery = (queryFn, options = {}) => {
                 }
             });
         };
-        const setResponse = (responseSetter) => {
-            if (responseSetter === undefined)
-                return;
-            const store = useQuery.get(key);
-            const response = typeof responseSetter === 'function'
-                ? responseSetter(store)
-                : responseSetter;
-            useQuery.set(key, {
-                status: 'success',
-                isLoading: false,
-                isSuccess: true,
-                isError: false,
-                response,
-                responseUpdatedAt: Date.now(),
-                data: select(response, { key, data: store.data }),
-            });
-        };
-        const fetchAllActiveQueries = () => {
-            useQuery.getAllWithSubscriber().forEach((state) => {
-                state.fetch();
-            });
-        };
-        const forceFetchAllActiveQueries = () => {
-            useQuery.getAllWithSubscriber().forEach((state) => {
-                state.forceFetch();
-            });
-        };
-        const resetAllQueries = () => {
-            useQuery.getAll().forEach((state) => {
-                state.reset();
-            });
-        };
         return {
             ...INITIAL_QUERY_STATE,
             key,
@@ -231,12 +202,6 @@ export const createQuery = (queryFn, options = {}) => {
             fetchNextPage,
             markAsStale: () => set({ responseUpdatedAt: null }),
             reset: () => set(INITIAL_QUERY_STATE),
-            setResponse,
-            helpers: {
-                fetchAllActiveQueries,
-                forceFetchAllActiveQueries,
-                resetAllQueries,
-            },
         };
     }, (() => {
         const fetchWindowFocusHandler = () => {
@@ -292,5 +257,59 @@ export const createQuery = (queryFn, options = {}) => {
             },
         };
     })());
+    useQuery.setInitialResponse = ({ key, response }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useState(() => {
+            if (response === undefined)
+                return;
+            const newPageParam = getNextPageParam(response, 1);
+            useQuery.set(key, {
+                status: 'success',
+                isLoading: false,
+                isSuccess: true,
+                isError: false,
+                response,
+                responseUpdatedAt: Date.now(),
+                data: select(response, { key: key, data: null }),
+                pageParam: newPageParam,
+                pageParams: [undefined, newPageParam],
+                hasNextPage: newPageParam !== undefined,
+            });
+        });
+    };
+    useQuery.invalidate = () => {
+        useQuery.getAll().forEach(({ key }) => {
+            useQuery.get(key).markAsStale();
+        });
+        useQuery.getAllWithSubscriber().forEach(({ key }) => {
+            useQuery.get(key).forceFetch();
+        });
+    };
+    useQuery.invalidateSpecificKey = (key) => {
+        useQuery.get(key).markAsStale();
+        const { getSubscribers } = useQuery.getStore(key);
+        if (getSubscribers().size > 0)
+            useQuery.get(key).forceFetch();
+    };
+    useQuery.optimisticUpdate = ({ key, response }) => {
+        const prevState = useQuery.get(key);
+        const optimisticResponse = typeof response === 'function'
+            ? response(prevState)
+            : response;
+        useQuery.set(key, {
+            isOptimisticData: true,
+            response: optimisticResponse,
+            data: select(optimisticResponse, { key: key, data: null }),
+        });
+        const revert = () => {
+            useQuery.set(key, {
+                isOptimisticData: false,
+                response: prevState.response,
+                data: prevState.data,
+            });
+        };
+        const invalidate = () => useQuery.invalidateSpecificKey(key);
+        return { revert, invalidate };
+    };
     return useQuery;
 };

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

@@ -1,4 +1,4 @@
-import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, Subscribers } from '../vanilla';
+import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreData, StoreData, Subscribers } from '../vanilla';
 import { WatchProps } from './create-store';
 type Maybe<T> = T | null | undefined;
 export type StoreKey = Record<string, any> | undefined;
@@ -24,6 +24,7 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
     setAll: (value: SetStoreData<T>, silent?: boolean) => void;
     subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
+    getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
     /**
      * Set default values inside a component.
      *

package/esm/react/create-stores.js

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

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

@@ -1,4 +1,4 @@
-import { CreateStoresOptions, StoreKey } from './create-stores';
+import { CreateStoresOptions, StoreKey, UseStores } from './create-stores';
 export type QueryStatus = 'loading' | 'success' | 'error';
 export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = {
     /**
@@ -22,29 +22,10 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      */
     fetchNextPage: () => void;
     markAsStale: () => void;
-    reset: () => void;
     /**
-     * Set query response & data.
-     */
-    setResponse: (responseSetter: TResponse | ((state: QueryState<TKey, TResponse, TData, TError>) => TResponse)) => void;
-    helpers: {
-        /**
-         * Fetch all active queries.
-         *
-         * Same as `fetch` method, this will only be called if the data is stale or empty.
-         */
-        fetchAllActiveQueries: () => void;
-        /**
-         * Fetch all active queries.
-         *
-         * Same as `fetch` method, this will only be called if the data is stale or empty.
-         */
-        forceFetchAllActiveQueries: () => void;
-        /**
-         * Delete query data for all query keys.
-         */
-        resetAllQueries: () => void;
-    };
+     * Set query state (data, error, etc) to initial state.
+     */
+    reset: () => void;
     /**
      * Network fetching status.
      */
@@ -84,6 +65,7 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
     isRefetching: boolean;
     isRefetchError: boolean;
     isPreviousData: boolean;
+    isOptimisticData: boolean;
     data: TData | null;
     response: TResponse | null;
     responseUpdatedAt: number | null;
@@ -159,4 +141,33 @@ export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any
     onError?: (error: TError, stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError>) => void;
     onSettled?: (stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError>) => void;
 };
-export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => import("./create-stores").UseStores<TKey, QueryState<TKey, TResponse, TData, TError>>;
+export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = UseStores<TKey, QueryState<TKey, TResponse, TData, TError>> & {
+    /**
+     * Set query's initial response.
+     *
+     * This is used for server-side rendered page or static page.
+     *
+     * IMPORTANT NOTE: Put this on the root component or parent component, before any component subscribed!
+     */
+    setInitialResponse: (options: {
+        key?: TKey;
+        response: TResponse;
+    }) => void;
+    invalidate: () => void;
+    invalidateSpecificKey: (key?: TKey | null) => void;
+    /**
+     * Optimistic update.
+     *
+     * @returns function to revert the changes & function to invalidate the query
+     *
+     * IMPORTANT NOTE: This won't work well on infinite query.
+     */
+    optimisticUpdate: (options: {
+        key?: TKey | null;
+        response: TResponse | ((prevState: QueryState<TKey, TResponse, TData, TError>) => TResponse);
+    }) => {
+        revert: () => void;
+        invalidate: () => void;
+    };
+};
+export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => UseQuery<TKey, TResponse, TData, TError>;

package/lib/react/create-query.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createQuery = void 0;
+const react_1 = require("react");
 const utils_1 = require("../utils");
 const create_stores_1 = require("./create-stores");
 const getDecision = (value, param, { ifTrue, ifAlways }) => {
@@ -22,6 +23,7 @@ const INITIAL_QUERY_STATE = {
     isRefetching: false,
     isRefetchError: false,
     isPreviousData: false,
+    isOptimisticData: false,
     data: null,
     response: null,
     responseUpdatedAt: null,
@@ -92,6 +94,7 @@ const createQuery = (queryFn, options = {}) => {
                         isRefetching: false,
                         isRefetchError: false,
                         isPreviousData: false,
+                        isOptimisticData: false,
                         data: responseAllPages.reduce((prev, responseCurrentPage) => {
                             return select(responseCurrentPage, { key, data: prev });
                         }, null),
@@ -194,38 +197,6 @@ const createQuery = (queryFn, options = {}) => {
                 }
             });
         };
-        const setResponse = (responseSetter) => {
-            if (responseSetter === undefined)
-                return;
-            const store = useQuery.get(key);
-            const response = typeof responseSetter === 'function'
-                ? responseSetter(store)
-                : responseSetter;
-            useQuery.set(key, {
-                status: 'success',
-                isLoading: false,
-                isSuccess: true,
-                isError: false,
-                response,
-                responseUpdatedAt: Date.now(),
-                data: select(response, { key, data: store.data }),
-            });
-        };
-        const fetchAllActiveQueries = () => {
-            useQuery.getAllWithSubscriber().forEach((state) => {
-                state.fetch();
-            });
-        };
-        const forceFetchAllActiveQueries = () => {
-            useQuery.getAllWithSubscriber().forEach((state) => {
-                state.forceFetch();
-            });
-        };
-        const resetAllQueries = () => {
-            useQuery.getAll().forEach((state) => {
-                state.reset();
-            });
-        };
         return {
             ...INITIAL_QUERY_STATE,
             key,
@@ -234,12 +205,6 @@ const createQuery = (queryFn, options = {}) => {
             fetchNextPage,
             markAsStale: () => set({ responseUpdatedAt: null }),
             reset: () => set(INITIAL_QUERY_STATE),
-            setResponse,
-            helpers: {
-                fetchAllActiveQueries,
-                forceFetchAllActiveQueries,
-                resetAllQueries,
-            },
         };
     }, (() => {
         const fetchWindowFocusHandler = () => {
@@ -295,6 +260,60 @@ const createQuery = (queryFn, options = {}) => {
             },
         };
     })());
+    useQuery.setInitialResponse = ({ key, response }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useState)(() => {
+            if (response === undefined)
+                return;
+            const newPageParam = getNextPageParam(response, 1);
+            useQuery.set(key, {
+                status: 'success',
+                isLoading: false,
+                isSuccess: true,
+                isError: false,
+                response,
+                responseUpdatedAt: Date.now(),
+                data: select(response, { key: key, data: null }),
+                pageParam: newPageParam,
+                pageParams: [undefined, newPageParam],
+                hasNextPage: newPageParam !== undefined,
+            });
+        });
+    };
+    useQuery.invalidate = () => {
+        useQuery.getAll().forEach(({ key }) => {
+            useQuery.get(key).markAsStale();
+        });
+        useQuery.getAllWithSubscriber().forEach(({ key }) => {
+            useQuery.get(key).forceFetch();
+        });
+    };
+    useQuery.invalidateSpecificKey = (key) => {
+        useQuery.get(key).markAsStale();
+        const { getSubscribers } = useQuery.getStore(key);
+        if (getSubscribers().size > 0)
+            useQuery.get(key).forceFetch();
+    };
+    useQuery.optimisticUpdate = ({ key, response }) => {
+        const prevState = useQuery.get(key);
+        const optimisticResponse = typeof response === 'function'
+            ? response(prevState)
+            : response;
+        useQuery.set(key, {
+            isOptimisticData: true,
+            response: optimisticResponse,
+            data: select(optimisticResponse, { key: key, data: null }),
+        });
+        const revert = () => {
+            useQuery.set(key, {
+                isOptimisticData: false,
+                response: prevState.response,
+                data: prevState.data,
+            });
+        };
+        const invalidate = () => useQuery.invalidateSpecificKey(key);
+        return { revert, invalidate };
+    };
     return useQuery;
 };
 exports.createQuery = createQuery;

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

@@ -1,4 +1,4 @@
-import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, Subscribers } from '../vanilla';
+import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreData, StoreData, Subscribers } from '../vanilla';
 import { WatchProps } from './create-store';
 type Maybe<T> = T | null | undefined;
 export type StoreKey = Record<string, any> | undefined;
@@ -24,6 +24,7 @@ export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = St
     setAll: (value: SetStoreData<T>, silent?: boolean) => void;
     subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
     getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
+    getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
     /**
      * Set default values inside a component.
      *

package/lib/react/create-stores.js

@@ -77,6 +77,7 @@ const createStores = (initializer, options = {}) => {
         const store = getStore(key);
         return store.getSubscribers();
     };
+    useStores.getStore = (key) => getStore(key);
     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": "1.4.1-beta.1",
+  "version": "2.0.0-alpha.1",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",