floppy-disk 3.2.1 → 3.3.0-beta.1

package/README.md

@@ -2,7 +2,7 @@
 
 A unified state model for **sync & async** data.
 
-If you know [Zustand](https://zustand.docs.pmnd.rs) & [TanStack-Query](https://tanstack.com/query), you already know FloppyDisk.\
+If you know [Zustand](https://zustand.docs.pmnd.rs) & [TanStack-Query](https://tanstack.com/query), you already know FloppyDisk(.ts).\
 It keeps what works, removes unnecessary complexity, and unifies everything into a simpler API.\
 No relearning—just a better experience.
 
@@ -16,535 +16,80 @@ Demo: https://afiiif.github.io/floppy-disk/
 npm install floppy-disk
 ```
 
-## Global Store
+## In short, it is:
 
-Here's how to create and use a store:
+- **Like Zustand, but has additional capabilities:**
+  - No selectors: automatically optimizes re-renders
+  - Store events: `onFirstSubscribe`, `onSubscribe`, `onUnsubscribe`, `onLastUnsubscribe`
+  - Easier to set initial state on SSR/SSG
+  - Smaller bundle
+- **Like TanStack Query, but:**
+  - DX is very similar to Zustand → One mental model for sync & async
+  - Much smaller bundle than TanStack Query → With nearly the same capabilities
 
-```tsx
-import { createStore } from "floppy-disk/react";
+**Docs: https://floppy-disk.vercel.app**
 
-const useDigimon = createStore({
-  age: 7,
-  level: "Rookie",
-});
-```
+## Store (Global State)
 
-You can use the store both inside and outside of React components.
+A store is a global state container that can be used both **inside and outside** React.\
+With FloppyDisk, creating a store is simple:
 
 ```tsx
-function MyDigimon() {
-  const { age } = useDigimon();
-  return <div>Digimon age: {age}</div>;
-  // This component will only re-render when `age` changes.
-  // Changes to `level` will NOT trigger a re-render.
-}
-
-function Control() {
-  return (
-    <>
-      <button
-        onClick={() => {
-          // You can setState directly
-          useDigimon.setState((prev) => ({ age: prev.age + 1 }));
-        }}
-      >
-        Increase digimon's age
-      </button>
-
-      <button onClick={evolve}>Evolve</button>
-    </>
-  );
-}
-
-// Create your own custom action
-const evolve = () => {
-  const { level } = useDigimon.getState();
-
-  const order = ["In-Training", "Rookie", "Champion", "Ultimate"];
-  const nextLevel = order[order.indexOf(level) + 1];
-
-  if (!nextLevel) return console.warn("Already at ultimate level");
-
-  useDigimon.setState({ level: nextLevel });
-};
-```
-
-### Store Subscription
-
-At its core, FloppyDisk is a **pub-sub store**.
-
-You can subscribe manually:
+import { createStore } from "floppy-disk/react";
 
-```tsx
-const unsubscribe = useMyStore.subscribe((state, prev) => {
-  console.log("New state:", state);
+const useLawn = createStore({
+  plants: 3,
+  zombies: 1,
 });
-
-// Later
-unsubscribe();
 ```
 
-FloppyDisk also provides lifecycle hooks tied to subscription count:
-
-```tsx
-const useTowerDefense = createStore(
-  { archers: 3, mages: 1, barracks: 2, artillery: 1 },
-  {
-    onFirstSubscribe: () => {
-      console.log("First subscriber! We’re officially popular 🎉");
-    },
-    onSubscribe: () => {
-      console.log("New subscriber joined. Welcome aboard 🫡");
-    },
-    onUnsubscribe: () => {
-      console.log("Subscriber left... was it something I said? 😭");
-    },
-    onLastUnsubscribe: () => {
-      console.log("Everyone left. Guess I’ll just exist quietly now...");
-    },
-  },
-);
-```
-
-### Differences from Zustand
-
-If you're coming from Zustand, this should feel very familiar.\
-Key differences:
-
-1. **No Selectors Needed**\
-   You don't need selectors when using hooks.
-   FloppyDisk automatically tracks which parts of the state are used and optimizes re-renders accordingly.
-2. **Object-Only Store Initialization**\
-   In FloppyDisk, stores **must** be initialized with an object. Primitive values or function initializers are not allowed.
-
-Zustand examples:
+Use it inside a component:
 
 ```tsx
-const useDate = create(new Date(2021, 01, 11));
+function MyPlants() {
+  const { plants } = useLawn(); // No selectors needed.
 
-const useCounter = create((set) => ({
-  value: 1,
-  increment: () => set((prev) => ({ value: prev.value + 1 })),
-}));
+  return <div>Plants: {plants}</div>; // Only re-render when plants state changes
+}
 ```
 
-FloppyDisk equivalents:
+Update the state **anywhere**:
 
 ```tsx
-const useDate = createStore({ value: new Date(2021, 01, 11) });
-
-const useCounter = createStore({ value: 1 });
-const increment = () => useCounter.setState((prev) => ({ value: prev.value + 1 }));
-// Unlike Zustand, defining actions inside the store is **discouraged** in FloppyDisk.
-// This improves tree-shakeability and keeps your store minimal.
-
-// However, it's still possible to mix actions with the state if you understand how closures work:
-const useCounterAlt = createStore({
-  value: 1,
-  increment: () => useCounterAlt.setState((prev) => ({ value: prev.value + 1 })),
-});
+const addPlant = () => {
+  useLawn.setState(prev => ({ plants: prev.plants + 1 }));
+};
 ```
 
-## Async State (Query & Mutation)
-
-FloppyDisk also provides a powerful async state layer, inspired by [TanStack-Query](https://tanstack.com/query) but with a simpler API.
-
-It is agnostic to the type of async operation,
-it works with any Promise-based operation—whether it's a network request, local computation, storage access, or something else.
-
-Because of that, we intentionally avoid terms like "fetch" or "refetch".\
-Instead, we use:
+## Query Store for Async State
 
-- **execute** → run the async operation (same as "fetch" in TanStack-Query)
-- **revalidate** → re-run while keeping existing data (same as "refetch" in TanStack-Query)
-
-### Query vs Mutation
-
-<details>
-
-<summary>Query → Read Operations</summary>
-
-Queries are designed for reading data.\
-They assume:
-
-- no side effects
-- no data mutation
-- safe to run multiple times
-
-Because of this, queries come with helpful defaults:
-
-- ✅ Retry mechanism (for transient failures)
-- ✅ Revalidation (keep data fresh automatically)
-- ✅ Caching & staleness control
-
-Use queries when:
-
-- fetching data
-- reading from storage
-- running idempotent async logic
-
-</details>
-
-<details>
-
-<summary>Mutation → Write Operations</summary>
-
-Mutations are designed for changing data.\
-Examples:
-
-- insert
-- update
-- delete
-- triggering side effects
-
-Because mutations are **not safe to repeat blindly**, FloppyDisk does **not** include:
-
-- ❌ automatic retry
-- ❌ automatic revalidation
-- ❌ implicit re-execution
-
-This is intentional.\
-Mutations should be explicit and controlled, not automatic.
-
-If you need retry mechanism, then you can always add it manually.
-
-</details>
-
-### Single Query
-
-Create a query using `createQuery`:
+Create a query store for async data with `createQuery`:
 
 ```tsx
 import { createQuery } from "floppy-disk/react";
 
-const myQuery = createQuery(
-  myAsyncFn,
-  // { staleTime: 5000, revalidateOnFocus: false } <-- optional options
-);
-
-const useMyQuery = myQuery();
-
-// Use it inside your component:
-
-function MyComponent() {
-  const { data, error } = useMyQuery();
-
-  if (!data && !error) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
-
-  return <div>{data.foo} {data.bar}</div>;
-}
-```
-
-### Query State: Two Independent Dimensions
-
-FloppyDisk tracks two things separately:
-
-- Is it running? → `isPending`
-- What's the result? → `state`
-
-They are **independent**.
-
-### Keyed Query (Dynamic Params)
-
-You can create parameterized queries:
-
-```tsx
-import { createQuery } from "floppy-disk/react";
-
-import { getUserById, type GetUserByIdResponse } from "../utils"; // Your own module
-
-type MyQueryParam = { id: string };
-
-const userQuery = createQuery<GetUserByIdResponse, MyQueryParam>(
-  getUserById,
-  // { staleTime: 5000, revalidateOnFocus: false } <-- optional options
+const plantDetailQuery = createQuery(
+  async ({ id }) => {
+    const res = await fetch(`/api/plants/${id}`);
+    return res.json();
+  },
 );
 ```
 
-Use it with parameters:
+Use it in your component:
 
 ```tsx
-function UserDetail({ id }) {
-  const useUserQuery = userQuery({ id });
-  const { data, error } = useUserQuery();
+function PlantDetail({ id }) {
+  const usePlantDetailQuery = plantDetailQuery({ id });
+  const { data, error } = usePlantDetailQuery();
 
   if (!data && !error) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
 
-  return <div>Name: {data.name}, email: {data.email}</div>;
+  return <div>Name: {data.name}, damage: {data.damage}</div>;
 }
 ```
 
-Each unique parameter creates its own cache entry.
-
-### Store Inheritance
-
-Queries in FloppyDisk are built on top of the core store.
-This means every query inherits the same capabilities, such as `subscribe`, `getState`, and store events.
-It also gets **automatic reactivity** out of the box, so components rerender only when the state they use actually changes.
-
-```tsx
-const { data } = useMyQuery();
-// ^Only data changes will trigger a re-render
-
-const value = useMyQuery().data?.foo.bar.baz;
-// ^Only data.foo.bar.baz changes will trigger a re-render
-```
-
-Get state outside React:
-
-```tsx
-const myQuery = createQuery<AsyncResponse>(myAsyncFn); // Query without paramerer
-const userQuery = createQuery<UserDetail, { id: string }>(getUserById); // Parameterized query
-
-const getMyQueryData = () => myQuery().getState().data;
-const getUserQueryData = ({ id }) => userQuery({ id }).getState().data;
-```
-
-### Infinite Query
+---
 
-FloppyDisk does **not provide** a dedicated "infinite query" API.\
-Instead, it embraces a simpler and more flexible approach:
-
-> Infinite queries are just **composition** + **recursion**.
-
-Why? Because async state is already powerful enough:
-
-- keyed queries handle parameters
-- components handle composition
-- recursion handles pagination
-
-No special abstraction needed.
-
-Here is the example on how to implement infinite query properly:
-
-```tsx
-type GetPostParams = {
-  cursor?: string; // For pagination
-};
-type GetPostsResponse = {
-  posts: Post[];
-  meta: { nextCursor: string };
-};
-
-const postsQuery = createQuery<GetPostsResponse, GetPostParams>(getPosts, {
-  staleTime: Infinity,
-  revalidateOnFocus: false,
-  revalidateOnReconnect: false,
-});
-
-function Main() {
-  return <Page cursor={undefined} />;
-}
-
-function Page({ cursor }: { cursor?: string }) {
-  const usePostsQuery = postsQuery({ cursor });
-  const { state, data, error } = usePostsQuery();
-
-  if (!data && !error) return <div>Loading...</div>;
-  if (error) return <div>Error</div>;
-
-  return (
-    <>
-      {data.posts.map((post) => (
-        <PostCard key={post.id} post={post} />
-      ))}
-      {data.meta.nextCursor && <LoadMore nextCursor={data.meta.nextCursor} />}
-    </>
-  );
-}
-
-function LoadMore({ nextCursor }: { nextCursor?: string }) {
-  const [isNextPageRequested, setIsNextPageRequested] = useState(() => {
-    const stateOfNextPageQuery = postsQuery({ cursor: nextCursor }).getState();
-    return stateOfNextPageQuery.isPending || stateOfNextPageQuery.isSuccess;
-  });
-
-  if (isNextPageRequested) {
-    return <Page cursor={nextCursor} />;
-  }
-
-  return <BottomObserver onReachBottom={() => setIsNextPageRequested(true)} />;
-}
-```
-
-When implementing infinite queries, it is **highly recommended to disable automatic revalidation**.
-
-Why?\
-In an infinite list, users may scroll through many pages ("_doom-scrolling_").\
-If revalidation is triggered:
-
-- All previously loaded pages may re-execute
-- Content at the top may change without the user noticing
-- Layout shifts can occur unexpectedly
-
-This leads to a **confusing and unstable user experience**.\
-Revalidating dozens of previously viewed pages rarely provides value to the user.
-
-## SSR Guidance
-
-Examples for using stores and queries in SSR with isolated data (no shared state between users).
-
-### Initialize Store State from Server
-
-```tsx
-const useCountStore = createStore({ count: 0 });
-
-function Page({ initialCount }) {
-  const { count } = useCountStore({
-    initialState: { count: initialCount }, // e.g. 3
-  });
-
-  return <>count is {count}</>; // Output: count is 3
-}
-```
-
-### Initialize Query Data from Server
-
-```tsx
-async function MyServerComponent() {
-  const data = await getData(); // e.g. { count: 3 }
-  return <MyClientComponent initialData={data} />;
-}
-
-const myQuery = createQuery(getData);
-const useMyQuery = myQuery();
-
-function MyClientComponent({ initialData }) {
-  const { data } = useMyQuery({
-    initialData: initialData,
-    // initialDataIsStale: true <-- Optional, default to false (no immediate revalidation)
-  });
-
-  return <>count is {data.count}</>; // Output: count is 3
-}
-```
-
-## Query State Machine
-
-This is how the query state transition flow looks like:
-
-```
-   initial                                                              failed, won't retry
- ┌────────────────────────────┐                                       ┌────────────────────────────┐
- │ isPending: false           │                                      Δ│ isPending: false           │
- │ isRevalidating: false      │                                       │ isRevalidating: false      │
- │                            │                  ┌──────────────────▶ │                            │
- │ state: "INITIAL"           │                  │                   Δ│ state: "ERROR"             │
- │ isSuccess: false           │                  │                    │ isSuccess: false           │
- │ data: undefined            │                  │                    │ data: undefined            │
- │ dataUpdatedAt: undefined   │                  │                    │ dataUpdatedAt: undefined   │
- │ dataStaleAt: undefined     │                  │                    │ dataStaleAt: undefined     │
- │ isError: false             │                  │                   Δ│ isError: true              │
- │ error: undefined           │                  │                   Δ│ error: <TError>            │
- │ errorUpdatedAt: undefined  │                  │                   Δ│ errorUpdatedAt: <number>   │
- │                            │                  │                    │                            │
- │ willRetryAt: undefined     │                  │                    │ willRetryAt: undefined     │
- │ isRetrying: false          │                  │                   •│ isRetrying: false          │
- │ retryCount: 0              │                  │                   •│ retryCount: 0 (reset)      │
- └─────────────┬──────────────┘                  │                    └────────────────────────────┘
-               │                                 │
-               │ execute                         │
-               ▼                                 │                      waiting retry delay
- ┌────────────────────────────┐                 (N)                   ┌────────────────────────────┐
-Δ│ isPending: true         [ƒ]│                  │                   Δ│ isPending: false           │
- │ isRevalidating: false      │    fail          │                    │ isRevalidating: false      │
- │                            ├──────────▶ Should retry? ────(Y)────▶ │                            │
- │ state: "INITIAL"           │                  ▲                    │ state: "INITIAL"           │
- │ isSuccess: false           │                  │                    │ isSuccess: false           │
- │ data: undefined            │                  │                    │ data: undefined            │
- │ dataUpdatedAt: undefined   │                  │                    │ dataUpdatedAt: undefined   │
- │ dataStaleAt: undefined     │                  │                    │ dataStaleAt: undefined     │
- │ isError: false             │                  │                    │ isError: false             │
- │ error: undefined           │                  │                    │ error: undefined           │
- │ errorUpdatedAt: undefined  │                  │                    │ errorUpdatedAt: undefined  │
- │                            │                  │                    │                            │
- │ willRetryAt: undefined     │                  │                   Δ│ willRetryAt: <number>      │
- │ isRetrying: false          │                  │                    │ isRetrying: false          │
- │ retryCount: 0              │                  │                    │ retryCount: <number>       │
- └─────────────┬──────────────┘                  │                    └─────────────┬──────────────┘
-               │                                 │                                  │
-               │ success                         │                                  │ retrying
-               ▼                                 │                                  ▼
- ┌────────────────────────────┐                  │                    ┌────────────────────────────┐
-Δ│ isPending: false           │                  │                   Δ│ isPending: true         [ƒ]│
- │ isRevalidating: false      │                  │            fail    │ isRevalidating: false      │
- │                            │                  └────────────────────┤                            │
-Δ│ state: "SUCCESS"           │                                       │ state: "INITIAL"           │
-Δ│ isSuccess: true            │                                       │ isSuccess: false           │
-Δ│ data: <TData>              │                                       │ data: undefined            │
-Δ│ dataUpdatedAt: <number>    │                                       │ dataUpdatedAt: undefined   │
-Δ│ dataStaleAt: <number>      │                                       │ dataStaleAt: undefined     │
- │ isError: false             │                                       │ isError: false             │
- │ error: undefined           │                                       │ error: undefined           │
- │ errorUpdatedAt: undefined  │                            success    │ errorUpdatedAt: undefined  │
- │                            │ ◀─────────────────────────────────────┤                            │
- │ willRetryAt: undefined     │                                      Δ│ willRetryAt: undefined     │
-•│ isRetrying: false          │                                      Δ│ isRetrying: true           │
-•│ retryCount: 0 (reset)      │                                      Δ│ retryCount: <number> (+1)  │
- └────────────────────────────┘                                       └────────────────────────────┘
-```
-
-And then after success:
-
-```
-   success                                                              failed, won't retry
- ┌────────────────────────────┐                                       ┌─────────────────────────────────────────┐
- │ isPending: false           │                                      Δ│ isPending: false                        │
- │ isRevalidating: false      │                                      Δ│ isRevalidating: false                   │
- │                            │                  ┌──────────────────▶ │                                         │
- │ state: "SUCCESS"           │                  │                   Δ│ state: "SUCCESS_BUT_REVALIDATION_ERROR" │
- │ isSuccess: true            │                  │                    │ isSuccess: true                         │
- │ data: <TData>              │                  │                    │ data: <TData>                           │
- │ dataUpdatedAt: <number>    │                  │                    │ dataUpdatedAt: <number>                 │
- │ dataStaleAt: <number>      │                  │                    │ dataStaleAt: <number>                   │
- │ isError: false             │                  │                    │ isError: false                          │
- │ error: undefined           │                  │                   Δ│ error: <TError>                         │
- │ errorUpdatedAt: undefined  │                  │                   Δ│ errorUpdatedAt: <number>                │
- │                            │                  │                    │                                         │
- │ willRetryAt: undefined     │                  │                    │ willRetryAt: undefined                  │
- │ isRetrying: false          │                  │                   •│ isRetrying: false                       │
- │ retryCount: 0              │                  │                   •│ retryCount: 0 (reset)                   │
- └─────────────┬──────────────┘                  │                    └─────────────────────────────────────────┘
-               │                                 │
-               │ revalidate                      │
-               ▼                                 │                      waiting retry delay
- ┌────────────────────────────┐                 (N)                   ┌────────────────────────────┐
-Δ│ isPending: true         [ƒ]│                  │                   Δ│ isPending: false           │
-Δ│ isRevalidating: true       │    fail          │                   Δ│ isRevalidating: false      │
- │                            ├──────────▶ Should retry? ────(Y)────▶ │                            │
- │ state: "SUCCESS"           │                  ▲                    │ state: "SUCCESS"           │
- │ isSuccess: true            │                  │                    │ isSuccess: true            │
- │ data: <TData>              │                  │                    │ data: <TData>              │
- │ dataUpdatedAt: <number>    │                  │                    │ dataUpdatedAt: <number>    │
- │ dataStaleAt: <number>      │                  │                    │ dataStaleAt: <number>      │
- │ isError: false             │                  │                    │ isError: false             │
- │ error: undefined           │                  │                    │ error: undefined           │
- │ errorUpdatedAt: undefined  │                  │                    │ errorUpdatedAt: undefined  │
- │                            │                  │                    │                            │
- │ willRetryAt: undefined     │                  │                   Δ│ willRetryAt: <number>      │
- │ isRetrying: false          │                  │                    │ isRetrying: false          │
- │ retryCount: 0              │                  │                    │ retryCount: <number>       │
- └─────────────┬──────────────┘                  │                    └─────────────┬──────────────┘
-               │                                 │                                  │
-               │ success                         │                                  │ retrying
-               ▼                                 │                                  ▼
- ┌────────────────────────────┐                  │                    ┌────────────────────────────┐
-Δ│ isPending: false           │                  │                   Δ│ isPending: true         [ƒ]│
-Δ│ isRevalidating: false      │                  │            fail   Δ│ isRevalidating: true       │
- │                            │                  └────────────────────┤                            │
- │ state: "SUCCESS"           │                                       │ state: "SUCCESS"           │
- │ isSuccess: true            │                                       │ isSuccess: true            │
-Δ│ data: <TData>              │                                       │ data: <TData>              │
-Δ│ dataUpdatedAt: <number>    │                                       │ dataUpdatedAt: <number>    │
-Δ│ dataStaleAt: <number>      │                                       │ dataStaleAt: <number>      │
- │ isError: false             │                                       │ isError: false             │
- │ error: undefined           │                                       │ error: undefined           │
- │ errorUpdatedAt: undefined  │                            success    │ errorUpdatedAt: undefined  │
- │                            │ ◀─────────────────────────────────────┤                            │
- │ willRetryAt: undefined     │                                      Δ│ willRetryAt: undefined     │
-•│ isRetrying: false          │                                      Δ│ isRetrying: true           │
-•│ retryCount: 0 (reset)      │                                      Δ│ retryCount: <number> (+1)  │
- └────────────────────────────┘                                       └────────────────────────────┘
-```
+Read the docs → https://floppy-disk.vercel.app

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

@@ -162,7 +162,7 @@ export type QueryOptions<TData, TVariable extends Record<string, any>, TError =
  *   // ...
  * }
  */
-export declare const createQuery: <TData, TVariable extends Record<string, any> = never, TError = Error>(queryFn: (variable: TVariable, currentState: QueryState<TData, TError>) => Promise<TData>, options?: QueryOptions<TData, TVariable, TError>) => ((variable?: TVariable) => ((options?: {
+export declare const createQuery: <TData, TVariable extends Record<string, any> = never, TError = Error>(queryFn: (variable: TVariable, currentState: QueryState<TData, TError>, variableHash: string) => Promise<TData>, options?: QueryOptions<TData, TVariable, TError>) => ((variable?: TVariable) => ((options?: {
     /**
      * Whether the query should be ravalidated automatically on mount.
      *
@@ -218,6 +218,7 @@ export declare const createQuery: <TData, TVariable extends Record<string, any>
      * Internal data, do not mutate!
      */
     metadata: {
+        variableHash: string;
         isInvalidated?: boolean;
         promise?: Promise<QueryState<TData, TError>> | undefined;
         promiseResolver?: ((value: QueryState<TData, TError> | PromiseLike<QueryState<TData, TError>>) => void) | undefined;

package/esm/react.mjs

@@ -208,7 +208,7 @@ const createQuery = (queryFn, options = {}) => {
   });
   const internals = /* @__PURE__ */ new WeakMap();
   const configureInternals = (store, variable, variableHash) => ({
-    metadata: {},
+    metadata: { variableHash },
     setInitialData: (data, revalidate2 = false) => {
       const state = store.getState();
       if (state.state === "INITIAL" && state.data === void 0) {
@@ -292,7 +292,7 @@ const createQuery = (queryFn, options = {}) => {
           isRetrying: !!metadata.retryResolver,
           retryCount: metadata.retryResolver ? stateBeforeExecute.retryCount + 1 : 0
         });
-        queryFn(variable, stateBeforeExecute).then((data) => {
+        queryFn(variable, stateBeforeExecute, metadata.variableHash).then((data) => {
           var _a;
           if (data === void 0) {
             console.error(

package/package.json

@@ -2,7 +2,10 @@
   "name": "floppy-disk",
   "description": "Lightweight unified state management for sync and async data.",
   "private": false,
-  "version": "3.2.1",
+  "version": "3.3.0-beta.1",
+  "publishConfig": {
+    "tag": "beta"
+  },
   "keywords": [
     "utilities",
     "store",
@@ -68,6 +71,7 @@
       }
     }
   },
+  "packageManager": "pnpm@10.32.1",
   "peerDependencies": {
     "@types/react": ">=17.0",
     "react": ">=17.0"
@@ -80,4 +84,4 @@
       "optional": true
     }
   }
-}
+}

package/react/create-query.d.ts

@@ -162,7 +162,7 @@ export type QueryOptions<TData, TVariable extends Record<string, any>, TError =
  *   // ...
  * }
  */
-export declare const createQuery: <TData, TVariable extends Record<string, any> = never, TError = Error>(queryFn: (variable: TVariable, currentState: QueryState<TData, TError>) => Promise<TData>, options?: QueryOptions<TData, TVariable, TError>) => ((variable?: TVariable) => ((options?: {
+export declare const createQuery: <TData, TVariable extends Record<string, any> = never, TError = Error>(queryFn: (variable: TVariable, currentState: QueryState<TData, TError>, variableHash: string) => Promise<TData>, options?: QueryOptions<TData, TVariable, TError>) => ((variable?: TVariable) => ((options?: {
     /**
      * Whether the query should be ravalidated automatically on mount.
      *
@@ -218,6 +218,7 @@ export declare const createQuery: <TData, TVariable extends Record<string, any>
      * Internal data, do not mutate!
      */
     metadata: {
+        variableHash: string;
         isInvalidated?: boolean;
         promise?: Promise<QueryState<TData, TError>> | undefined;
         promiseResolver?: ((value: QueryState<TData, TError> | PromiseLike<QueryState<TData, TError>>) => void) | undefined;

package/react.js

@@ -210,7 +210,7 @@ const createQuery = (queryFn, options = {}) => {
   });
   const internals = /* @__PURE__ */ new WeakMap();
   const configureInternals = (store, variable, variableHash) => ({
-    metadata: {},
+    metadata: { variableHash },
     setInitialData: (data, revalidate2 = false) => {
       const state = store.getState();
       if (state.state === "INITIAL" && state.data === void 0) {
@@ -294,7 +294,7 @@ const createQuery = (queryFn, options = {}) => {
           isRetrying: !!metadata.retryResolver,
           retryCount: metadata.retryResolver ? stateBeforeExecute.retryCount + 1 : 0
         });
-        queryFn(variable, stateBeforeExecute).then((data) => {
+        queryFn(variable, stateBeforeExecute, metadata.variableHash).then((data) => {
           var _a;
           if (data === void 0) {
             console.error(