floppy-disk 2.0.2-beta.1 → 2.1.0-beta.1

package/README.md

@@ -2,7 +2,8 @@
 
 A lightweight, simple, and powerful state management library.
 
-This library was highly-inspired by [Zustand](https://www.npmjs.com/package/zustand) and [React-Query](https://tanstack.com/query). Both are awesome state manager, but I want to have something like that with **more power** and **less bundle size**.
+This library was highly-inspired by [Zustand](https://www.npmjs.com/package/zustand) and [TanStack-Query](https://tanstack.com/query).
+Both are awesome state manager. That's why this Floppy Disk library behaves like them, but with small DX improvement, **more power**, and **less bundle size**.
 
 **Bundle Size Comparison:**
 
@@ -23,7 +24,7 @@ import { createQuery, createMutation } from 'floppy-disk'; // 8.2 kB (gzipped: 2
 - Using Zustand & React-Query: https://demo-zustand-react-query.vercel.app/  
   👉 Total: **309.21 kB**
 - Using Floppy Disk: https://demo-floppy-disk.vercel.app/  
-  👉 Total: **270.86 kB** 🎉
+  👉 Total: **270.87 kB** 🎉
 
 ## Key Features
 
@@ -50,6 +51,8 @@ import { createQuery, createMutation } from 'floppy-disk'; // 8.2 kB (gzipped: 2
     - Can be used with literally any asynchronous data fetching client, including GraphQL ✅
 - Create mutation ✅
 
+**View official documentation on [floppy-disk.vercel.app](https://floppy-disk.vercel.app/)**
+
 ## Table of Contents
 
 - [Key Features](#key-features)
@@ -60,6 +63,7 @@ import { createQuery, createMutation } from 'floppy-disk'; // 8.2 kB (gzipped: 2
 - [Stores](#stores)
 - [Query \& Mutation](#query--mutation)
   - [Query State \& Network Fetching State](#query-state--network-fetching-state)
+  - [Inherited from createStores](#inherited-from-createstores)
   - [Single Query](#single-query)
   - [Single Query with Params](#single-query-with-params)
   - [Paginated Query or Infinite Query](#paginated-query-or-infinite-query)
@@ -431,6 +435,35 @@ Here is the flow of the query data state:
 For network fetching state, we use `isWaiting`.  
 The value will be `true` if the query is called and still waiting for the response.
 
+### Inherited from createStores
+
+The `createQuery` function inherits functionality from the `createStores` function, allowing us to perform the same result and actions available in `createStores`.
+
+```tsx
+const useMyQuery = createQuery(myQueryFn, {
+  // 👇 Same as createStores options
+  defaultDeps: undefined,
+  onFirstSubscribe: (state) => console.log('onFirstSubscribe', state),
+  onSubscribe: (state) => console.log('onSubscribe', state),
+  onUnsubscribe: (state) => console.log('onUnsubscribe', state),
+  onLastUnsubscribe: (state) => console.log('onLastUnsubscribe', state),
+  onBeforeChangeKey: (nextKey, prevKey) => console.log('Store key changed', nextKey, prevKey),
+
+  // ... other createQuery options
+});
+```
+
+Custom reactivity (dependency array) also works:
+
+```tsx
+function QueryLoader() {
+  // This component doesn't care whether the query is success or error.
+  // It just listening to network fetching state. 👇
+  const { isWaiting } = useMyQuery((state) => [state.isWaiting]);
+  return <div>Is network fetching? {String(isWaiting)}</div>;
+}
+```
+
 ### Single Query
 
 ```jsx
@@ -458,22 +491,18 @@ function SingleQuery() {
 
 > Example: [https://codesandbox.io/.../examples/react/query](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/query)
 
-Custom reactivity:
-
-```jsx
-// This component doesn't care whether the query is success or error.
-// It just listening to network fetching state. 👇
-function SingleQueryLoader() {
-  const { isWaiting } = useGitHubQuery((state) => [state.isWaiting]);
-  return <div>Is network fetching? {String(isWaiting)}</div>;
-}
-```
-
 Actions:
 
+Normally, we don't need reactivity for the actions.
+Therefore, using `get` method will be better, since it will not re-render the component when a query state changed.
+
 ```jsx
 function Actions() {
-  const { fetch, forceFetch, reset } = useGitHubQuery(() => []);
+  const { fetch, forceFetch, reset } = useGitHubQuery.get();
+
+  // Or like this:
+  // const { isLoading, data, error, fetch, forceFetch, reset } = useGitHubQuery();
+
   return (
     <>
       <button onClick={fetch}>Call query if the query data is stale</button>
@@ -524,22 +553,14 @@ function MyComponent() {
 Get data or do something outside component:
 
 ```jsx
-const getData = () => {
-  console.log(useGitHubQuery.get().data);
-};
-
-const resetQuery = () => {
-  useGitHubQuery.get().reset();
-};
-
-function Actions() {
-  return (
-    <>
-      <button onClick={getData}>Get Data</button>
-      <button onClick={resetQuery}>Reset query</button>
-    </>
-  );
-}
+const getData = () => console.log(useGitHubQuery.get().data);
+const resetQuery = () => useGitHubQuery.get().reset();
+
+// Works just like createStores
+useMyQuery.get(/* ... */);
+useMyQuery.set(/* ... */);
+useMyQuery.subscribe(/* ... */);
+useMyQuery.getSubscribers(/* ... */);
 ```
 
 ### Single Query with Params

package/esm/index.d.ts

@@ -1,2 +1,3 @@
+export { hashStoreKey } from './utils';
 export * from './vanilla';
 export * from './react';

package/esm/index.js

@@ -1,2 +1,3 @@
+export { hashStoreKey } from './utils';
 export * from './vanilla';
 export * from './react';

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

@@ -4,6 +4,10 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      * Query store key, an object that will be hashed into a string as a query store identifier.
      */
     key: TKey;
+    /**
+     * Query store key hash, a string used as a query store identifier.
+     */
+    keyHash: string;
     /**
      * Will only be called if the data is stale or empty.
      */

package/esm/preact/create-query.js

@@ -1,5 +1,5 @@
 import { useState } from 'preact/hooks';
-import { hashStoreKey, identityFn, noop } from '../utils';
+import { identityFn, noop } from '../utils';
 import { createStores } from './create-stores';
 const getDecision = (value, param, { ifTrue, ifAlways }) => {
     if (value === true || (typeof value === 'function' && value(param) === true)) {
@@ -9,7 +9,6 @@ const getDecision = (value, param, { ifTrue, ifAlways }) => {
         ifAlways();
     }
 };
-const DEFAULT_STALE_TIME = 3000; // 3 seconds
 const INITIAL_QUERY_STATE = {
     isWaiting: false,
     isWaitingNextPage: false,
@@ -41,11 +40,13 @@ const useQueryDefaultDeps = (state) => [
     state.hasNextPage,
 ];
 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 { onFirstSubscribe = noop, onSubscribe = noop, onLastUnsubscribe = noop, onBeforeChangeKey = noop, defaultDeps = useQueryDefaultDeps, select = identityFn, staleTime = 3000, // 3 seconds
+    fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, // 3 seconds
+    keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError = noop, onSettled = noop, ...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 useQuery = createStores(({ get, set, key: _key, keyHash }) => {
         const key = _key;
         const getRetryProps = (error, retryCount) => {
             const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
@@ -70,13 +71,13 @@ export const createQuery = (queryFn, options = {}) => {
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
-                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
+                    clearTimeout(retryTimeoutId.get(keyHash));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
-                preventReplaceResponse.set(hashKeyFn(key), false);
+                preventReplaceResponse.set(keyHash, false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
-                    if (preventReplaceResponse.get(hashKeyFn(key))) {
+                    if (preventReplaceResponse.get(keyHash)) {
                         set({ isWaiting: false });
                         return;
                     }
@@ -144,7 +145,7 @@ export const createQuery = (queryFn, options = {}) => {
                             hasNextPage: pageParam !== undefined,
                         });
                     if (shouldRetry) {
-                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        retryTimeoutId.set(keyHash, window.setTimeout(() => {
                             set({ retryCount: prevState.retryCount + 1 });
                             callQuery();
                         }, delay));
@@ -172,7 +173,7 @@ export const createQuery = (queryFn, options = {}) => {
             if (isWaitingNextPage || !hasNextPage)
                 return;
             set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
-            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
+            clearTimeout(retryNextPageTimeoutId.get(keyHash));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -197,7 +198,7 @@ export const createQuery = (queryFn, options = {}) => {
                     isGoingToRetryNextPage: shouldRetry,
                 });
                 if (shouldRetry) {
-                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                    retryNextPageTimeoutId.set(keyHash, window.setTimeout(() => {
                         set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
                         fetchNextPage();
                     }, delay));
@@ -207,6 +208,7 @@ export const createQuery = (queryFn, options = {}) => {
         return {
             ...INITIAL_QUERY_STATE,
             key,
+            keyHash,
             fetch,
             forceFetch,
             fetchNextPage,
@@ -225,7 +227,6 @@ export const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
-            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -244,8 +245,8 @@ export const createQuery = (queryFn, options = {}) => {
                     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)));
+                clearTimeout(retryTimeoutId.get(state.keyHash));
+                clearTimeout(retryNextPageTimeoutId.get(state.keyHash));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {
@@ -323,7 +324,7 @@ export const createQuery = (queryFn, options = {}) => {
             response: optimisticResponse,
             data: select(optimisticResponse, { key: key, data: null }),
         });
-        preventReplaceResponse.set(hashKeyFn(key), true);
+        preventReplaceResponse.set(prevState.keyHash, true);
         const revert = () => {
             useQuery.set(key, {
                 isOptimisticData: false,

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

@@ -3,9 +3,10 @@ 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;
+    key: TKey;
+    keyHash: string;
 }) => T;
 export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
     /**

package/esm/preact/create-stores.js

@@ -6,11 +6,11 @@ export const createStores = (initializer, options = {}) => {
     const stores = new Map();
     const getStore = (_key) => {
         const key = _key || {};
-        const normalizedKey = hashKeyFn(key);
-        if (!stores.has(normalizedKey)) {
-            stores.set(normalizedKey, initStore((api) => initializer({ key, ...api }), options));
+        const keyHash = hashKeyFn(key);
+        if (!stores.has(keyHash)) {
+            stores.set(keyHash, initStore((api) => initializer({ key, keyHash, ...api }), options));
         }
-        return stores.get(normalizedKey);
+        return stores.get(keyHash);
     };
     /**
      * IMPORTANT NOTE: selectDeps function must not be changed after initialization.
@@ -18,9 +18,9 @@ export const createStores = (initializer, options = {}) => {
     const useStores = (...args) => {
         const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
         const key = _key || {};
-        const normalizedKey = hashKeyFn(key);
+        const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        const { get, subscribe } = useMemo(() => getStore(key), [normalizedKey]);
+        const { get, subscribe } = useMemo(() => getStore(key), [keyHash]);
         const [state, setState] = useState(get);
         const isFirstRender = useRef(true);
         const prevKey = useRef(key);
@@ -34,7 +34,7 @@ export const createStores = (initializer, options = {}) => {
             const unsubs = subscribe(setState, selectDeps);
             return unsubs;
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [normalizedKey]);
+        }, [keyHash]);
         return state;
     };
     useStores.get = (key) => {

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

@@ -4,6 +4,10 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      * Query store key, an object that will be hashed into a string as a query store identifier.
      */
     key: TKey;
+    /**
+     * Query store key hash, a string used as a query store identifier.
+     */
+    keyHash: string;
     /**
      * Will only be called if the data is stale or empty.
      */

package/esm/react/create-query.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { hashStoreKey, identityFn, noop } from '../utils';
+import { identityFn, noop } from '../utils';
 import { createStores } from './create-stores';
 const getDecision = (value, param, { ifTrue, ifAlways }) => {
     if (value === true || (typeof value === 'function' && value(param) === true)) {
@@ -9,7 +9,6 @@ const getDecision = (value, param, { ifTrue, ifAlways }) => {
         ifAlways();
     }
 };
-const DEFAULT_STALE_TIME = 3000; // 3 seconds
 const INITIAL_QUERY_STATE = {
     isWaiting: false,
     isWaitingNextPage: false,
@@ -41,11 +40,13 @@ const useQueryDefaultDeps = (state) => [
     state.hasNextPage,
 ];
 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 { onFirstSubscribe = noop, onSubscribe = noop, onLastUnsubscribe = noop, onBeforeChangeKey = noop, defaultDeps = useQueryDefaultDeps, select = identityFn, staleTime = 3000, // 3 seconds
+    fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, // 3 seconds
+    keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError = noop, onSettled = noop, ...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 useQuery = createStores(({ get, set, key: _key, keyHash }) => {
         const key = _key;
         const getRetryProps = (error, retryCount) => {
             const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
@@ -70,13 +71,13 @@ export const createQuery = (queryFn, options = {}) => {
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
-                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
+                    clearTimeout(retryTimeoutId.get(keyHash));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
-                preventReplaceResponse.set(hashKeyFn(key), false);
+                preventReplaceResponse.set(keyHash, false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
-                    if (preventReplaceResponse.get(hashKeyFn(key))) {
+                    if (preventReplaceResponse.get(keyHash)) {
                         set({ isWaiting: false });
                         return;
                     }
@@ -144,7 +145,7 @@ export const createQuery = (queryFn, options = {}) => {
                             hasNextPage: pageParam !== undefined,
                         });
                     if (shouldRetry) {
-                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        retryTimeoutId.set(keyHash, window.setTimeout(() => {
                             set({ retryCount: prevState.retryCount + 1 });
                             callQuery();
                         }, delay));
@@ -172,7 +173,7 @@ export const createQuery = (queryFn, options = {}) => {
             if (isWaitingNextPage || !hasNextPage)
                 return;
             set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
-            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
+            clearTimeout(retryNextPageTimeoutId.get(keyHash));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -197,7 +198,7 @@ export const createQuery = (queryFn, options = {}) => {
                     isGoingToRetryNextPage: shouldRetry,
                 });
                 if (shouldRetry) {
-                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                    retryNextPageTimeoutId.set(keyHash, window.setTimeout(() => {
                         set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
                         fetchNextPage();
                     }, delay));
@@ -207,6 +208,7 @@ export const createQuery = (queryFn, options = {}) => {
         return {
             ...INITIAL_QUERY_STATE,
             key,
+            keyHash,
             fetch,
             forceFetch,
             fetchNextPage,
@@ -225,7 +227,6 @@ export const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
-            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -244,8 +245,8 @@ export const createQuery = (queryFn, options = {}) => {
                     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)));
+                clearTimeout(retryTimeoutId.get(state.keyHash));
+                clearTimeout(retryNextPageTimeoutId.get(state.keyHash));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {
@@ -323,7 +324,7 @@ export const createQuery = (queryFn, options = {}) => {
             response: optimisticResponse,
             data: select(optimisticResponse, { key: key, data: null }),
         });
-        preventReplaceResponse.set(hashKeyFn(key), true);
+        preventReplaceResponse.set(prevState.keyHash, true);
         const revert = () => {
             useQuery.set(key, {
                 isOptimisticData: false,

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

@@ -3,9 +3,10 @@ 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;
+    key: TKey;
+    keyHash: string;
 }) => T;
 export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
     /**

package/esm/react/create-stores.js

@@ -6,11 +6,11 @@ export const createStores = (initializer, options = {}) => {
     const stores = new Map();
     const getStore = (_key) => {
         const key = _key || {};
-        const normalizedKey = hashKeyFn(key);
-        if (!stores.has(normalizedKey)) {
-            stores.set(normalizedKey, initStore((api) => initializer({ key, ...api }), options));
+        const keyHash = hashKeyFn(key);
+        if (!stores.has(keyHash)) {
+            stores.set(keyHash, initStore((api) => initializer({ key, keyHash, ...api }), options));
         }
-        return stores.get(normalizedKey);
+        return stores.get(keyHash);
     };
     /**
      * IMPORTANT NOTE: selectDeps function must not be changed after initialization.
@@ -18,9 +18,9 @@ export const createStores = (initializer, options = {}) => {
     const useStores = (...args) => {
         const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
         const key = _key || {};
-        const normalizedKey = hashKeyFn(key);
+        const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        const { get, subscribe } = useMemo(() => getStore(key), [normalizedKey]);
+        const { get, subscribe } = useMemo(() => getStore(key), [keyHash]);
         const [state, setState] = useState(get);
         const isFirstRender = useRef(true);
         const prevKey = useRef(key);
@@ -34,7 +34,7 @@ export const createStores = (initializer, options = {}) => {
             const unsubs = subscribe(setState, selectDeps);
             return unsubs;
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [normalizedKey]);
+        }, [keyHash]);
         return state;
     };
     useStores.get = (key) => {

package/lib/index.d.ts

@@ -1,2 +1,3 @@
+export { hashStoreKey } from './utils';
 export * from './vanilla';
 export * from './react';

package/lib/index.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.hashStoreKey = void 0;
 const tslib_1 = require("tslib");
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "hashStoreKey", { enumerable: true, get: function () { return utils_1.hashStoreKey; } });
 tslib_1.__exportStar(require("./vanilla"), exports);
 tslib_1.__exportStar(require("./react"), exports);

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

@@ -4,6 +4,10 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      * Query store key, an object that will be hashed into a string as a query store identifier.
      */
     key: TKey;
+    /**
+     * Query store key hash, a string used as a query store identifier.
+     */
+    keyHash: string;
     /**
      * Will only be called if the data is stale or empty.
      */

package/lib/preact/create-query.js

@@ -12,7 +12,6 @@ const getDecision = (value, param, { ifTrue, ifAlways }) => {
         ifAlways();
     }
 };
-const DEFAULT_STALE_TIME = 3000; // 3 seconds
 const INITIAL_QUERY_STATE = {
     isWaiting: false,
     isWaitingNextPage: false,
@@ -44,11 +43,13 @@ const useQueryDefaultDeps = (state) => [
     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 { onFirstSubscribe = utils_1.noop, onSubscribe = utils_1.noop, onLastUnsubscribe = utils_1.noop, onBeforeChangeKey = utils_1.noop, defaultDeps = useQueryDefaultDeps, select = utils_1.identityFn, staleTime = 3000, // 3 seconds
+    fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, // 3 seconds
+    keepPreviousData, getNextPageParam = () => undefined, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, ...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 useQuery = (0, create_stores_1.createStores)(({ get, set, key: _key, keyHash }) => {
         const key = _key;
         const getRetryProps = (error, retryCount) => {
             const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
@@ -73,13 +74,13 @@ const createQuery = (queryFn, options = {}) => {
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
-                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
+                    clearTimeout(retryTimeoutId.get(keyHash));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
-                preventReplaceResponse.set(hashKeyFn(key), false);
+                preventReplaceResponse.set(keyHash, false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
-                    if (preventReplaceResponse.get(hashKeyFn(key))) {
+                    if (preventReplaceResponse.get(keyHash)) {
                         set({ isWaiting: false });
                         return;
                     }
@@ -147,7 +148,7 @@ const createQuery = (queryFn, options = {}) => {
                             hasNextPage: pageParam !== undefined,
                         });
                     if (shouldRetry) {
-                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        retryTimeoutId.set(keyHash, window.setTimeout(() => {
                             set({ retryCount: prevState.retryCount + 1 });
                             callQuery();
                         }, delay));
@@ -175,7 +176,7 @@ const createQuery = (queryFn, options = {}) => {
             if (isWaitingNextPage || !hasNextPage)
                 return;
             set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
-            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
+            clearTimeout(retryNextPageTimeoutId.get(keyHash));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -200,7 +201,7 @@ const createQuery = (queryFn, options = {}) => {
                     isGoingToRetryNextPage: shouldRetry,
                 });
                 if (shouldRetry) {
-                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                    retryNextPageTimeoutId.set(keyHash, window.setTimeout(() => {
                         set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
                         fetchNextPage();
                     }, delay));
@@ -210,6 +211,7 @@ const createQuery = (queryFn, options = {}) => {
         return {
             ...INITIAL_QUERY_STATE,
             key,
+            keyHash,
             fetch,
             forceFetch,
             fetchNextPage,
@@ -228,7 +230,6 @@ const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
-            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -247,8 +248,8 @@ const createQuery = (queryFn, options = {}) => {
                     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)));
+                clearTimeout(retryTimeoutId.get(state.keyHash));
+                clearTimeout(retryNextPageTimeoutId.get(state.keyHash));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {
@@ -326,7 +327,7 @@ const createQuery = (queryFn, options = {}) => {
             response: optimisticResponse,
             data: select(optimisticResponse, { key: key, data: null }),
         });
-        preventReplaceResponse.set(hashKeyFn(key), true);
+        preventReplaceResponse.set(prevState.keyHash, true);
         const revert = () => {
             useQuery.set(key, {
                 isOptimisticData: false,

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

@@ -3,9 +3,10 @@ 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;
+    key: TKey;
+    keyHash: string;
 }) => T;
 export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
     /**

package/lib/preact/create-stores.js

@@ -9,11 +9,11 @@ const createStores = (initializer, 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));
+        const keyHash = hashKeyFn(key);
+        if (!stores.has(keyHash)) {
+            stores.set(keyHash, (0, vanilla_1.initStore)((api) => initializer({ key, keyHash, ...api }), options));
         }
-        return stores.get(normalizedKey);
+        return stores.get(keyHash);
     };
     /**
      * IMPORTANT NOTE: selectDeps function must not be changed after initialization.
@@ -21,9 +21,9 @@ const createStores = (initializer, options = {}) => {
     const useStores = (...args) => {
         const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
         const key = _key || {};
-        const normalizedKey = hashKeyFn(key);
+        const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        const { get, subscribe } = (0, hooks_1.useMemo)(() => getStore(key), [normalizedKey]);
+        const { get, subscribe } = (0, hooks_1.useMemo)(() => getStore(key), [keyHash]);
         const [state, setState] = (0, hooks_1.useState)(get);
         const isFirstRender = (0, hooks_1.useRef)(true);
         const prevKey = (0, hooks_1.useRef)(key);
@@ -37,7 +37,7 @@ const createStores = (initializer, options = {}) => {
             const unsubs = subscribe(setState, selectDeps);
             return unsubs;
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [normalizedKey]);
+        }, [keyHash]);
         return state;
     };
     useStores.get = (key) => {

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

@@ -4,6 +4,10 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      * Query store key, an object that will be hashed into a string as a query store identifier.
      */
     key: TKey;
+    /**
+     * Query store key hash, a string used as a query store identifier.
+     */
+    keyHash: string;
     /**
      * Will only be called if the data is stale or empty.
      */

package/lib/react/create-query.js

@@ -12,7 +12,6 @@ const getDecision = (value, param, { ifTrue, ifAlways }) => {
         ifAlways();
     }
 };
-const DEFAULT_STALE_TIME = 3000; // 3 seconds
 const INITIAL_QUERY_STATE = {
     isWaiting: false,
     isWaitingNextPage: false,
@@ -44,11 +43,13 @@ const useQueryDefaultDeps = (state) => [
     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 { onFirstSubscribe = utils_1.noop, onSubscribe = utils_1.noop, onLastUnsubscribe = utils_1.noop, onBeforeChangeKey = utils_1.noop, defaultDeps = useQueryDefaultDeps, select = utils_1.identityFn, staleTime = 3000, // 3 seconds
+    fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, // 3 seconds
+    keepPreviousData, getNextPageParam = () => undefined, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, ...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 useQuery = (0, create_stores_1.createStores)(({ get, set, key: _key, keyHash }) => {
         const key = _key;
         const getRetryProps = (error, retryCount) => {
             const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
@@ -73,13 +74,13 @@ const createQuery = (queryFn, options = {}) => {
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
-                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
+                    clearTimeout(retryTimeoutId.get(keyHash));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
-                preventReplaceResponse.set(hashKeyFn(key), false);
+                preventReplaceResponse.set(keyHash, false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
-                    if (preventReplaceResponse.get(hashKeyFn(key))) {
+                    if (preventReplaceResponse.get(keyHash)) {
                         set({ isWaiting: false });
                         return;
                     }
@@ -147,7 +148,7 @@ const createQuery = (queryFn, options = {}) => {
                             hasNextPage: pageParam !== undefined,
                         });
                     if (shouldRetry) {
-                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        retryTimeoutId.set(keyHash, window.setTimeout(() => {
                             set({ retryCount: prevState.retryCount + 1 });
                             callQuery();
                         }, delay));
@@ -175,7 +176,7 @@ const createQuery = (queryFn, options = {}) => {
             if (isWaitingNextPage || !hasNextPage)
                 return;
             set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
-            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
+            clearTimeout(retryNextPageTimeoutId.get(keyHash));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -200,7 +201,7 @@ const createQuery = (queryFn, options = {}) => {
                     isGoingToRetryNextPage: shouldRetry,
                 });
                 if (shouldRetry) {
-                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                    retryNextPageTimeoutId.set(keyHash, window.setTimeout(() => {
                         set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
                         fetchNextPage();
                     }, delay));
@@ -210,6 +211,7 @@ const createQuery = (queryFn, options = {}) => {
         return {
             ...INITIAL_QUERY_STATE,
             key,
+            keyHash,
             fetch,
             forceFetch,
             fetchNextPage,
@@ -228,7 +230,6 @@ const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
-            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -247,8 +248,8 @@ const createQuery = (queryFn, options = {}) => {
                     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)));
+                clearTimeout(retryTimeoutId.get(state.keyHash));
+                clearTimeout(retryNextPageTimeoutId.get(state.keyHash));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {
@@ -326,7 +327,7 @@ const createQuery = (queryFn, options = {}) => {
             response: optimisticResponse,
             data: select(optimisticResponse, { key: key, data: null }),
         });
-        preventReplaceResponse.set(hashKeyFn(key), true);
+        preventReplaceResponse.set(prevState.keyHash, true);
         const revert = () => {
             useQuery.set(key, {
                 isOptimisticData: false,

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

@@ -3,9 +3,10 @@ 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;
+    key: TKey;
+    keyHash: string;
 }) => T;
 export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
     /**

package/lib/react/create-stores.js

@@ -9,11 +9,11 @@ const createStores = (initializer, 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));
+        const keyHash = hashKeyFn(key);
+        if (!stores.has(keyHash)) {
+            stores.set(keyHash, (0, vanilla_1.initStore)((api) => initializer({ key, keyHash, ...api }), options));
         }
-        return stores.get(normalizedKey);
+        return stores.get(keyHash);
     };
     /**
      * IMPORTANT NOTE: selectDeps function must not be changed after initialization.
@@ -21,9 +21,9 @@ const createStores = (initializer, options = {}) => {
     const useStores = (...args) => {
         const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
         const key = _key || {};
-        const normalizedKey = hashKeyFn(key);
+        const keyHash = hashKeyFn(key);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        const { get, subscribe } = (0, react_1.useMemo)(() => getStore(key), [normalizedKey]);
+        const { get, subscribe } = (0, react_1.useMemo)(() => getStore(key), [keyHash]);
         const [state, setState] = (0, react_1.useState)(get);
         const isFirstRender = (0, react_1.useRef)(true);
         const prevKey = (0, react_1.useRef)(key);
@@ -37,7 +37,7 @@ const createStores = (initializer, options = {}) => {
             const unsubs = subscribe(setState, selectDeps);
             return unsubs;
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [normalizedKey]);
+        }, [keyHash]);
         return state;
     };
     useStores.get = (key) => {

package/package.json

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