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

package/lib/preact/create-query.js

@@ -0,0 +1,337 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createQuery = void 0;
+const hooks_1 = require("preact/hooks");
+const utils_1 = require("../utils");
+const create_stores_1 = require("./create-stores");
+const getDecision = (value, param, { ifTrue, ifAlways }) => {
+    if (value === true || (typeof value === 'function' && value(param) === true)) {
+        ifTrue();
+    }
+    else if (value === 'always' || (typeof value === 'function' && value(param) === 'always')) {
+        ifAlways();
+    }
+};
+const DEFAULT_STALE_TIME = 3000; // 3 seconds
+const INITIAL_QUERY_STATE = {
+    isWaiting: false,
+    isWaitingNextPage: false,
+    status: 'loading',
+    isLoading: true,
+    isSuccess: false,
+    isError: false,
+    isRefetching: false,
+    isRefetchError: false,
+    isPreviousData: false,
+    isOptimisticData: false,
+    data: null,
+    response: null,
+    responseUpdatedAt: null,
+    error: null,
+    errorUpdatedAt: null,
+    retryCount: 0,
+    isGoingToRetry: false,
+    pageParam: undefined,
+    pageParams: [undefined],
+    hasNextPage: false,
+    retryNextPageCount: 0,
+    isGoingToRetryNextPage: false,
+};
+const useQueryDefaultDeps = (state) => [
+    state.data,
+    state.error,
+    state.isWaitingNextPage,
+    state.hasNextPage,
+];
+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) => {
+            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, pageParams } = get();
+            if (isWaiting || enabled === false || (typeof enabled === 'function' && !enabled(key)))
+                return;
+            if (isLoading)
+                set({ isWaiting: true });
+            else
+                set({ isWaiting: true, isRefetching: true });
+            const callQuery = () => {
+                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 };
+                preventReplaceResponse.set(hashKeyFn(key), false);
+                queryFn(key, stateBeforeCallQuery)
+                    .then((response) => {
+                    if (preventReplaceResponse.get(hashKeyFn(key))) {
+                        set({ isWaiting: false });
+                        return;
+                    }
+                    responseAllPages.push(response);
+                    const newPageParam = getNextPageParam(response, responseAllPages.length);
+                    newPageParams.push(newPageParam);
+                    if (newPageParam !== undefined && newPageParams.length < pageParams.length) {
+                        pageParam = newPageParam;
+                        callQuery();
+                        return;
+                    }
+                    set({
+                        isWaiting: false,
+                        status: 'success',
+                        isLoading: false,
+                        isSuccess: true,
+                        isError: false,
+                        isRefetching: false,
+                        isRefetchError: false,
+                        isPreviousData: false,
+                        isOptimisticData: false,
+                        data: responseAllPages.reduce((prev, responseCurrentPage) => {
+                            return select(responseCurrentPage, { key, data: prev });
+                        }, null),
+                        response,
+                        responseUpdatedAt: Date.now(),
+                        error: null,
+                        errorUpdatedAt: null,
+                        retryCount: 0,
+                        pageParam: newPageParam,
+                        pageParams: newPageParams,
+                        hasNextPage: newPageParam !== undefined,
+                    });
+                    onSuccess(response, stateBeforeCallQuery);
+                })
+                    .catch((error) => {
+                    const prevState = get();
+                    const errorUpdatedAt = Date.now();
+                    const { shouldRetry, delay } = getRetryProps(error, prevState.retryCount);
+                    set(prevState.isSuccess
+                        ? {
+                            isWaiting: false,
+                            isRefetching: false,
+                            isRefetchError: true,
+                            data: responseAllPages.length
+                                ? responseAllPages.reduce((prev, response) => {
+                                    return select(response, { key, data: prev });
+                                }, null)
+                                : prevState.data,
+                            error,
+                            errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
+                            pageParam,
+                            hasNextPage: pageParam !== undefined,
+                        }
+                        : {
+                            isWaiting: false,
+                            isError: true,
+                            error,
+                            errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
+                            pageParam,
+                            hasNextPage: pageParam !== undefined,
+                        });
+                    if (shouldRetry) {
+                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                            set({ retryCount: prevState.retryCount + 1 });
+                            callQuery();
+                        }, delay));
+                    }
+                    onError(error, stateBeforeCallQuery);
+                })
+                    .finally(() => {
+                    onSettled(stateBeforeCallQuery);
+                });
+            };
+            callQuery();
+        };
+        const fetch = () => {
+            const { responseUpdatedAt } = get();
+            const isStale = Date.now() > Number(responseUpdatedAt) + staleTime;
+            if (!isStale)
+                return;
+            forceFetch();
+        };
+        const fetchNextPage = () => {
+            const state = get();
+            const { isLoading, isWaitingNextPage, data, hasNextPage, pageParam, pageParams } = state;
+            if (isLoading)
+                return forceFetch();
+            if (isWaitingNextPage || !hasNextPage)
+                return;
+            set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
+            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
+            queryFn(key, { ...state, pageParam })
+                .then((response) => {
+                const newPageParam = getNextPageParam(response, pageParams.length);
+                set({
+                    isWaitingNextPage: false,
+                    response,
+                    responseUpdatedAt: Date.now(),
+                    data: select(response, { key, data }),
+                    pageParam: newPageParam,
+                    pageParams: pageParams.concat(newPageParam),
+                    hasNextPage: newPageParam !== undefined,
+                });
+            })
+                .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));
+                }
+            });
+        };
+        return {
+            ...INITIAL_QUERY_STATE,
+            key,
+            fetch,
+            forceFetch,
+            fetchNextPage,
+            reset: () => set(INITIAL_QUERY_STATE),
+            optimisticUpdate: (response) => useQuery.optimisticUpdate({ key, response }),
+        };
+    }, (() => {
+        const fetchWindowFocusHandler = () => {
+            useQuery.getAllWithSubscriber().forEach((state) => {
+                getDecision(fetchOnWindowFocus, state.key, {
+                    ifTrue: state.fetch,
+                    ifAlways: state.forceFetch,
+                });
+            });
+        };
+        return {
+            ...createStoresOptions,
+            defaultDeps,
+            hashKeyFn,
+            onFirstSubscribe: (state) => {
+                if (typeof window !== 'undefined' && fetchOnWindowFocus) {
+                    window.addEventListener('focus', fetchWindowFocusHandler);
+                }
+                onFirstSubscribe(state);
+            },
+            onSubscribe: (state) => {
+                getDecision(fetchOnMount, state.key, {
+                    ifTrue: state.fetch,
+                    ifAlways: state.forceFetch,
+                });
+                onSubscribe(state);
+            },
+            onLastUnsubscribe: (state) => {
+                if (typeof window !== 'undefined' && fetchOnWindowFocus) {
+                    window.removeEventListener('focus', fetchWindowFocusHandler);
+                }
+                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) => {
+                if (keepPreviousData) {
+                    const nextData = useQuery.get(nextKey);
+                    if (!nextData.data) {
+                        const prevData = useQuery.get(prevKey);
+                        if (prevData.data) {
+                            useQuery.set(nextKey, {
+                                data: prevData.data,
+                                response: prevData.response,
+                                isLoading: false,
+                                isPreviousData: true,
+                            }, true);
+                        }
+                    }
+                }
+                onBeforeChangeKey(nextKey, prevKey);
+            },
+        };
+    })());
+    useQuery.setInitialResponse = ({ key, response }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, hooks_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.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;
+            set({ responseUpdatedAt: null });
+            if (getSubscribers().size > 0)
+                store.get().forceFetch();
+        });
+    };
+    useQuery.invalidateSpecificKey = (key) => {
+        const { set, getSubscribers } = useQuery.getStore(key);
+        set({ responseUpdatedAt: null });
+        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 }),
+        });
+        preventReplaceResponse.set(hashKeyFn(key), true);
+        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/preact/create-store.d.ts

@@ -0,0 +1,28 @@
+import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, StoreInitializer, Subscribers } from '../vanilla';
+export type WatchProps<T> = {
+    selectDeps?: SelectDeps<T>;
+    render: (state: T) => any;
+};
+export type UseStore<T extends StoreData> = {
+    /**
+     * @param selectDeps A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStore`.
+     *
+     * IMPORTANT NOTE: `selectDeps` must not be changed after initialization.
+     */
+    (selectDeps?: SelectDeps<T>): T;
+    get: () => T;
+    set: (value: SetStoreData<T>, silent?: boolean) => void;
+    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T>) => () => void;
+    getSubscribers: () => Subscribers<T>;
+    /**
+     * Set default values inside a component.
+     *
+     * IMPORTANT NOTE: Put this on the root component or parent component, before any component subscribed!
+     */
+    setDefaultValues: (values: SetStoreData<T>) => void;
+    Watch: (props: WatchProps<T>) => any;
+};
+export declare const createStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T> & {
+    defaultDeps?: SelectDeps<T>;
+}) => UseStore<T>;

package/lib/preact/create-store.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStore = void 0;
+const hooks_1 = require("preact/hooks");
+const vanilla_1 = require("../vanilla");
+const createStore = (initializer, options = {}) => {
+    const { get, set, subscribe, getSubscribers } = (0, vanilla_1.initStore)(initializer, options);
+    const { defaultDeps } = options;
+    /**
+     * IMPORTANT NOTE: selectDeps function must not be changed after initialization.
+     */
+    const useStore = (selectDeps = defaultDeps) => {
+        const [state, setState] = (0, hooks_1.useState)(get);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        (0, hooks_1.useEffect)(() => subscribe(setState, selectDeps), []);
+        return state;
+    };
+    useStore.get = get;
+    useStore.set = set;
+    useStore.subscribe = subscribe;
+    useStore.getSubscribers = getSubscribers;
+    useStore.setDefaultValues = (value) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, hooks_1.useState)(() => {
+            const subscribers = getSubscribers();
+            if (subscribers.size > 0) {
+                console.warn('Put setDefaultValues on the root component or parent component, before any component subscribed!');
+            }
+            set(value);
+        });
+    };
+    const Watch = ({ selectDeps, render }) => {
+        const store = useStore(selectDeps);
+        return render(store);
+    };
+    useStore.Watch = Watch;
+    return useStore;
+};
+exports.createStore = createStore;

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

@@ -0,0 +1,45 @@
+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;
+export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = (api: {
+    key: TKey;
+    get: () => T;
+    set: (value: SetStoreData<T>, silent?: boolean) => void;
+}) => T;
+export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
+    /**
+     * @param key (Optional) Store key, an object that will be hashed into a string as a store identifier.
+     *
+     * @param selectDeps A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
+     * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStores`.
+     *
+     * IMPORTANT NOTE: `selectDeps` must not be changed after initialization.
+     */
+    (...args: [Maybe<TKey>, SelectDeps<T>?] | [SelectDeps<T>?]): T;
+    get: (key?: Maybe<TKey>) => T;
+    getAll: () => T[];
+    getAllWithSubscriber: () => T[];
+    set: (key: Maybe<TKey>, value: SetStoreData<T>, silent?: boolean) => void;
+    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>;
+    getStores: () => Map<string, InitStoreReturn<T>>;
+    /**
+     * Set default values inside a component.
+     *
+     * IMPORTANT NOTE: Put this on the root component or parent component, before any component subscribed!
+     */
+    setDefaultValues: (key: Maybe<TKey>, values: SetStoreData<T>) => void;
+    Watch: (props: WatchProps<T> & {
+        storeKey?: Maybe<TKey>;
+    }) => any;
+};
+export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = InitStoreOptions<T> & {
+    onBeforeChangeKey?: (nextKey: TKey, prevKey: TKey) => void;
+    defaultDeps?: SelectDeps<T>;
+    hashKeyFn?: (obj: TKey) => string;
+};
+export declare const createStores: <TKey extends StoreKey = StoreKey, T extends StoreData = StoreData>(initializer: StoresInitializer<TKey, T>, options?: CreateStoresOptions<TKey, T>) => UseStores<TKey, T>;
+export {};

package/lib/preact/create-stores.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStores = void 0;
+const hooks_1 = require("preact/hooks");
+const utils_1 = require("../utils");
+const vanilla_1 = require("../vanilla");
+const createStores = (initializer, options = {}) => {
+    const { onBeforeChangeKey = utils_1.noop, defaultDeps, hashKeyFn = utils_1.hashStoreKey } = options;
+    const stores = new Map();
+    const getStore = (_key) => {
+        const key = _key || {};
+        const normalizedKey = hashKeyFn(key);
+        if (!stores.has(normalizedKey)) {
+            stores.set(normalizedKey, (0, vanilla_1.initStore)((api) => initializer({ key, ...api }), options));
+        }
+        return stores.get(normalizedKey);
+    };
+    /**
+     * IMPORTANT NOTE: selectDeps function must not be changed after initialization.
+     */
+    const useStores = (...args) => {
+        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
+        const key = _key || {};
+        const normalizedKey = hashKeyFn(key);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const { get, subscribe } = (0, hooks_1.useMemo)(() => getStore(key), [normalizedKey]);
+        const [state, setState] = (0, hooks_1.useState)(get);
+        const isFirstRender = (0, hooks_1.useRef)(true);
+        const prevKey = (0, hooks_1.useRef)(key);
+        (0, hooks_1.useEffect)(() => {
+            if (!isFirstRender.current) {
+                onBeforeChangeKey(key, prevKey.current);
+                setState(get);
+            }
+            isFirstRender.current = false;
+            prevKey.current = key;
+            const unsubs = subscribe(setState, selectDeps);
+            return unsubs;
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [normalizedKey]);
+        return state;
+    };
+    useStores.get = (key) => {
+        const store = getStore(key);
+        return store.get();
+    };
+    useStores.getAll = () => {
+        const allStores = [];
+        stores.forEach((store) => {
+            allStores.push(store.get());
+        });
+        return allStores;
+    };
+    useStores.getAllWithSubscriber = () => {
+        const allStores = [];
+        stores.forEach((store) => {
+            const subscribers = store.getSubscribers();
+            if (subscribers.size > 0)
+                allStores.push(store.get());
+        });
+        return allStores;
+    };
+    useStores.set = (key, value, silent) => {
+        const store = getStore(key);
+        store.set(value, silent);
+    };
+    useStores.setAll = (value, silent) => {
+        stores.forEach((store) => {
+            store.set(value, silent);
+        });
+    };
+    useStores.subscribe = (key, fn, selectDeps) => {
+        const store = getStore(key);
+        return store.subscribe(fn, selectDeps);
+    };
+    useStores.getSubscribers = (key) => {
+        const store = getStore(key);
+        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, hooks_1.useState)(() => {
+            const store = getStore(key);
+            const subscribers = store.getSubscribers();
+            if (subscribers.size > 0) {
+                console.warn('Put setDefaultValues on the root component or parent component, before any component subscribed!');
+            }
+            store.set(value);
+        });
+    };
+    const Watch = ({ storeKey, selectDeps, render }) => {
+        const store = useStores(storeKey, selectDeps);
+        return render(store);
+    };
+    useStores.Watch = Watch;
+    return useStores;
+};
+exports.createStores = createStores;

package/lib/preact/index.d.ts

@@ -0,0 +1,5 @@
+export * from './create-store';
+export * from './create-stores';
+export * from './create-query';
+export * from './create-mutation';
+export * from './with-context';

package/lib/preact/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./create-store"), exports);
+tslib_1.__exportStar(require("./create-stores"), exports);
+tslib_1.__exportStar(require("./create-query"), exports);
+tslib_1.__exportStar(require("./create-mutation"), exports);
+tslib_1.__exportStar(require("./with-context"), exports);

package/lib/preact/with-context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentChildren } from 'preact';
+export declare const withContext: <T>(initFn: () => T) => readonly [({ children, onInitialize, }: {
+    children: ComponentChildren;
+    onInitialize?: ((value: T) => void) | undefined;
+}) => import("react").JSX.Element, () => T | null];

package/lib/preact/with-context.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withContext = void 0;
+const preact_1 = require("preact");
+const hooks_1 = require("preact/hooks");
+const withContext = (initFn) => {
+    const Context = (0, preact_1.createContext)(null);
+    const Provider = ({ children, onInitialize, }) => {
+        const [value] = (0, hooks_1.useState)(() => {
+            const store = initFn();
+            onInitialize && onInitialize(store);
+            return store;
+        });
+        // @ts-ignore
+        return React.createElement(Context.Provider, { value: value }, children);
+    };
+    const useCurrentContext = () => (0, hooks_1.useContext)(Context);
+    return [Provider, useCurrentContext];
+};
+exports.withContext = withContext;

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

@@ -21,11 +21,21 @@ 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.
      */
     reset: () => 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: (response: TResponse | ((prevState: QueryState<TKey, TResponse, TData, TError>) => TResponse)) => {
+        revert: () => void;
+        invalidate: () => void;
+    };
     /**
      * Network fetching status.
      */
@@ -153,6 +163,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

@@ -79,8 +79,10 @@ const createQuery = (queryFn, options = {}) => {
                 preventReplaceResponse.set(hashKeyFn(key), false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
-                    if (preventReplaceResponse.get(hashKeyFn(key)))
+                    if (preventReplaceResponse.get(hashKeyFn(key))) {
+                        set({ isWaiting: false });
                         return;
+                    }
                     responseAllPages.push(response);
                     const newPageParam = getNextPageParam(response, responseAllPages.length);
                     newPageParams.push(newPageParam);
@@ -209,8 +211,8 @@ const createQuery = (queryFn, options = {}) => {
             fetch,
             forceFetch,
             fetchNextPage,
-            markAsStale: () => set({ responseUpdatedAt: null }),
             reset: () => set(INITIAL_QUERY_STATE),
+            optimisticUpdate: (response) => useQuery.optimisticUpdate({ key, response }),
         };
     }, (() => {
         const fetchWindowFocusHandler = () => {
@@ -286,6 +288,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;

package/lib/react/index.d.ts

@@ -0,0 +1,5 @@
+export * from './create-store';
+export * from './create-stores';
+export * from './create-query';
+export * from './create-mutation';
+export * from './with-context';