@mittwald/react-ghostmaker 1.0.2 → 1.0.3

package/dist/esm/context.js

@@ -1,4 +1,4 @@
 import { createCascade } from "context";
 export const ghostFnContext = createCascade();
 const useGhostFnContext = () => ghostFnContext.use();
-export const getGhostId = () => useGhostFnContext()?.ghostId;
+export const getQueryContext = () => useGhostFnContext()?.query;

package/dist/esm/hash.js

@@ -1,7 +1,7 @@
 import { hash } from "object-code";
 const hashCache = new WeakMap();
-export const hashObject = (model) => {
-    const hashed = hashCache.get(model) ?? hash(model);
-    hashCache.set(model, hashed);
+export const hashObject = (obj) => {
+    const hashed = hashCache.get(obj) ?? hash(obj);
+    hashCache.set(obj, hashed);
     return hashed;
 };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 export { makeGhost } from "./makeGhost";
-export { getGhostId } from "./context";
-export { invalidateGhostsById } from "./invalidate";
+export { getQueryContext } from "./context";
+export { invalidateGhosts } from "./invalidate";
 export { registerModelIdentifier } from "./modelIdentifier";
 export * from "./maybeGhost";

package/dist/esm/invalidate.js

@@ -1,17 +1,10 @@
-import { matchQuery } from "@tanstack/react-query";
-import { getGhostId, queries } from "./queries";
-export const invalidateGhostsById = (queryClient, ghostId) => {
-    queryClient.invalidateQueries({
-        predicate: (query) => query.meta?.ghostId === ghostId,
-    });
-};
-export function invalidateGhosts(queryClient, model, chain) {
-    const queryKey = queries.ghostChain(model, chain);
-    const ghostId = getGhostId(queryKey);
-    queryClient.invalidateQueries({
-        predicate: (query) => query.meta?.ghostId === ghostId ||
-            matchQuery({
-                queryKey,
-            }, query),
-    });
+export async function invalidateGhosts(queryClient, queryKey) {
+    for (let i = 1; i <= queryKey.length; i++) {
+        const partialKey = queryKey.slice(0, i);
+        const exact = i < queryKey.length;
+        await queryClient.invalidateQueries({
+            queryKey: partialKey,
+            exact,
+        });
+    }
 }

package/dist/esm/makeGhost.js

@@ -4,11 +4,12 @@ import { useGhostChain } from "./useGhostChain";
 import { RenderComponent } from "./RenderComponent";
 import { resolveGhostChain } from "./resolveGhostChain";
 import { invalidateGhosts } from "./invalidate";
-function buildGhostDeep(model, ghostChain) {
-    const target = (() => {
+import { queries } from "./queries";
+function buildGhostDeep(target, ghostChain) {
+    const proxyTarget = (() => {
         // Dummy function to allow ghosting function calls
     });
-    const useQuery = (options) => useGhostChain(model, ghostChain, options);
+    const useQuery = (options) => useGhostChain(target, ghostChain, options);
     const useGhostMethods = {
         use: (options) => useQuery(options).value,
         useGhost: useQuery,
@@ -26,11 +27,9 @@ function buildGhostDeep(model, ghostChain) {
             });
             return ghost;
         },
-        invalidate: (queryClient) => {
-            invalidateGhosts(queryClient, model, ghostChain);
-        },
+        invalidate: (queryClient) => invalidateGhosts(queryClient, queries.ghostChain(target, ghostChain)),
     };
-    const ghost = new Proxy(target, {
+    const ghost = new Proxy(proxyTarget, {
         get: ($, prop) => {
             if (prop === isGhostMarker) {
                 return true;
@@ -39,7 +38,7 @@ function buildGhostDeep(model, ghostChain) {
                 return useGhostMethods[prop];
             }
             if (prop === "then") {
-                return (resolve, reject) => resolveGhostChain(model, ghostChain).then(resolve).catch(reject);
+                return (resolve, reject) => resolveGhostChain(target, ghostChain).then(resolve).catch(reject);
             }
             if (prop === Symbol.toPrimitive) {
                 return (hint) => {
@@ -49,7 +48,7 @@ function buildGhostDeep(model, ghostChain) {
                     return null;
                 };
             }
-            return buildGhostDeep(model, [
+            return buildGhostDeep(target, [
                 ...ghostChain,
                 {
                     propName: String(prop),
@@ -61,11 +60,11 @@ function buildGhostDeep(model, ghostChain) {
             if (prevCallStackEntry) {
                 prevCallStackEntry.args = args;
             }
-            return buildGhostDeep(model, ghostChain);
+            return buildGhostDeep(target, ghostChain);
         },
     });
     return ghost;
 }
-export function makeGhost(model) {
-    return buildGhostDeep(model, []);
+export function makeGhost(target) {
+    return buildGhostDeep(target, []);
 }

package/dist/esm/makeGhost.test.js

@@ -1,18 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cleanup, render, waitFor } from "@testing-library/react";
-import { describe, expect, test, vitest, beforeEach } from "vitest";
-import { CustomerDetailed, CustomerGhost, Project, ProjectGhost, customerMocks, getCustomerNameGhostIds, projectMocks, } from "./testMocks";
+import { cleanup, render } from "@testing-library/react";
+import { describe, expect, test, vitest, beforeEach, afterEach } from "vitest";
+import { CustomerDetailed, CustomerGhost, Project, ProjectDetailed, ProjectGhost, advanceSleepTimer, customerMocks, getCustomerNameGhostIds, projectMocks, } from "./testMocks";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { invalidateGhostsById } from "./invalidate";
+import { invalidateGhosts } from "./invalidate";
+import { makeGhost } from "./makeGhost";
+beforeEach(() => {
+    vitest.useFakeTimers();
+});
+afterEach(() => {
+    vitest.runOnlyPendingTimers();
+    vitest.useRealTimers();
+});
 test("Pre Test", async () => {
     const project = new Project("P1");
     expect(projectMocks.getDetailed).toHaveBeenCalledTimes(0);
     expect(customerMocks.getDetailed).toHaveBeenCalledTimes(0);
-    const detailedProject = await project.getDetailed();
+    const [detailedProject] = await Promise.all([
+        project.getDetailed(),
+        advanceSleepTimer(),
+    ]);
     expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1);
     expect(customerMocks.getDetailed).toHaveBeenCalledTimes(0);
     expect(detailedProject.name).toBe("Project P1");
-    const customer = await detailedProject.customer.getDetailed();
+    const [customer] = await Promise.all([
+        detailedProject.customer.getDetailed(),
+        advanceSleepTimer(),
+    ]);
+    await vitest.runOnlyPendingTimersAsync();
     expect(customerMocks.getDetailed).toHaveBeenCalledTimes(1);
     expect(customer.id).toBe("C1");
 });
@@ -28,62 +43,46 @@ describe("Await", () => {
         expect(customerMocks.getDetailed).toHaveBeenCalledTimes(0);
         expect(customerMocks.getName).toHaveBeenCalledTimes(0);
         expect(transform).toHaveBeenCalledTimes(0);
-        await customerNameGhost;
+        await Promise.all([customerNameGhost, advanceSleepTimer(2)]);
+        await vitest.runOnlyPendingTimersAsync();
         expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1);
         expect(customerMocks.getDetailed).toHaveBeenCalledTimes(1);
         expect(customerMocks.getName).toHaveBeenCalledTimes(1);
         expect(transform).toHaveBeenCalledTimes(1);
     });
     test("simple usage", async () => {
-        const customerName = await ProjectGhost.ofId("Project A")
-            .getDetailed()
-            .customer.getDetailed()
-            .getName();
-        expect(customerName).toBe("Customer C1");
-    });
-    test("with transform", async () => {
-        const customerName = await ProjectGhost.ofId("Project A")
-            .getDetailed()
-            .customer.getDetailed()
-            .getName()
-            .transform((name) => name.toUpperCase());
-        expect(customerName).toBe("CUSTOMER C1");
-    });
-    test("with undefined result in call stack", async () => {
-        const customerName = await ProjectGhost.ofId("Project A")
-            .findDetailed()
-            .customer.getDetailed()
-            .getName()
-            .transform((name) => {
-            expect(name).toBeUndefined();
-            return name?.toUpperCase();
-        });
-        expect(customerName).toBeUndefined();
-    });
-    test("simple usage", async () => {
-        const customerName = await ProjectGhost.ofId("Project A")
-            .getDetailed()
-            .customer.getDetailed()
-            .getName();
+        const [customerName] = await Promise.all([
+            ProjectGhost.ofId("Project A")
+                .getDetailed()
+                .customer.getDetailed()
+                .getName(),
+            advanceSleepTimer(2),
+        ]);
         expect(customerName).toBe("Customer C1");
     });
     test("with transform", async () => {
-        const customerName = await ProjectGhost.ofId("Project A")
-            .getDetailed()
-            .customer.getDetailed()
-            .getName()
-            .transform((name) => name.toUpperCase());
+        const [customerName] = await Promise.all([
+            ProjectGhost.ofId("Project A")
+                .getDetailed()
+                .customer.getDetailed()
+                .getName()
+                .transform((name) => name.toUpperCase()),
+            advanceSleepTimer(2),
+        ]);
         expect(customerName).toBe("CUSTOMER C1");
     });
     test("with undefined result in call stack", async () => {
-        const customerName = await ProjectGhost.ofId("Project A")
-            .findDetailed()
-            .customer.getDetailed()
-            .getName()
-            .transform((name) => {
-            expect(name).toBeUndefined();
-            return name?.toUpperCase();
-        });
+        const [customerName] = await Promise.all([
+            ProjectGhost.ofId("Project A")
+                .findDetailed()
+                .customer.getDetailed()
+                .getName()
+                .transform((name) => {
+                expect(name).toBeUndefined();
+                return name?.toUpperCase();
+            }),
+            advanceSleepTimer(2),
+        ]);
         expect(customerName).toBeUndefined();
     });
 });
@@ -106,7 +105,10 @@ describe("Hooks", () => {
             wrapper: (props) => (_jsx(QueryClientProvider, { client: queryClient, children: props.children })),
         });
         if (waitForSuspense) {
-            await ui.findByTestId("hook-ready");
+            await Promise.all([
+                ui.findByTestId("hook-ready"),
+                vitest.runOnlyPendingTimersAsync(),
+            ]);
         }
         return {
             ui,
@@ -175,10 +177,14 @@ describe("Hooks", () => {
                 .customer.getDetailed()
                 .getName()
                 .useGhost());
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getName).toHaveBeenCalledTimes(1);
             result.current?.invalidate();
-            await waitFor(() => expect(projectMocks.getDetailed).toHaveBeenCalledTimes(2));
-            await waitFor(() => expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2));
-            await waitFor(() => expect(customerMocks.getName).toHaveBeenCalledTimes(2));
+            await vitest.runOnlyPendingTimersAsync();
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getName).toHaveBeenCalledTimes(2);
         });
         test("ghost.invalidate() triggers re-execution of all async methods", async () => {
             const ghost = ProjectGhost.ofId("Project A")
@@ -186,10 +192,14 @@ describe("Hooks", () => {
                 .customer.getDetailed()
                 .getName();
             await renderHookWithSuspense(() => ghost.use());
-            await waitFor(() => expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1));
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getName).toHaveBeenCalledTimes(1);
             ghost.invalidate(queryClient);
-            await waitFor(() => expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2));
-            await waitFor(() => expect(customerMocks.getName).toHaveBeenCalledTimes(2));
+            await vitest.runOnlyPendingTimersAsync();
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getName).toHaveBeenCalledTimes(2);
         });
         test("invalidateGhostsById() triggers re-execution of all async methods", async () => {
             const ghost = ProjectGhost.ofId("Project A")
@@ -197,27 +207,47 @@ describe("Hooks", () => {
                 .customer.getDetailed()
                 .getName();
             await renderHookWithSuspense(() => ghost.use());
-            await waitFor(() => expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1));
-            expect(getCustomerNameGhostIds.current).toBeDefined();
-            invalidateGhostsById(queryClient, getCustomerNameGhostIds.current);
-            await waitFor(() => expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2));
-            await waitFor(() => expect(customerMocks.getName).toHaveBeenCalledTimes(2));
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getName).toHaveBeenCalledTimes(1);
+            invalidateGhosts(queryClient, getCustomerNameGhostIds.current.queryKey);
+            await vitest.runOnlyPendingTimersAsync();
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getName).toHaveBeenCalledTimes(2);
         });
         test("ghost.invalidate() invalidates all dependent ghosts", async () => {
             const ghost = ProjectGhost.ofId("Project A").getDetailed();
             const specialGhost = ghost.customer.getDetailed();
             await renderHookWithSuspense(() => specialGhost.use());
-            await waitFor(() => expect(customerMocks.getDetailed).toHaveBeenCalledTimes(1));
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(1);
             ghost.invalidate(queryClient);
-            await waitFor(() => expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2));
+            await vitest.runOnlyPendingTimersAsync();
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(2);
         });
-        test("ghost.invalidate() invalidate previous ghosts", async () => {
+        test("ghost.invalidate() invalidates previous ghosts", async () => {
             const ghost = ProjectGhost.ofId("Project A").getDetailed();
             const specialGhost = ghost.customer.getDetailed();
             await renderHookWithSuspense(() => ghost.use());
-            await waitFor(() => expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1));
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(1);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(0);
             specialGhost.invalidate(queryClient);
-            await expect(() => waitFor(() => expect(projectMocks.getDetailed).toHaveBeenCalledTimes(2))).rejects.toThrow();
+            await vitest.runOnlyPendingTimersAsync();
+            expect(projectMocks.getDetailed).toHaveBeenCalledTimes(2);
+            expect(customerMocks.getDetailed).toHaveBeenCalledTimes(0);
+        });
+        test("target changes invalidates dependent ghosts", async () => {
+            const projectGhost = ProjectGhost.ofId("Project A").getDetailed();
+            await renderHookWithSuspense(() => makeGhost(projectGhost.use()).getName().use());
+            expect(projectMocks.getName).toHaveBeenCalledTimes(1);
+            projectMocks.getDetailed = vitest
+                .fn()
+                .mockImplementation((id) => new ProjectDetailed(id, `CHANGED! Project ${id}`, "C1"));
+            projectGhost.invalidate(queryClient);
+            await vitest.runOnlyPendingTimersAsync();
+            expect(projectMocks.getName).toHaveBeenCalledTimes(2);
         });
     });
 });

package/dist/esm/queries.js

@@ -1,6 +1,7 @@
 import is from "@sindresorhus/is";
 import { modelIdentifiers } from "./modelIdentifier";
-export const getObjectQueryKey = (something) => {
+import { hashObject } from "./hash";
+const getTargetQueryKey = (something) => {
     if (is.primitive(something)) {
         return String(something);
     }
@@ -21,22 +22,21 @@ export const getObjectQueryKey = (something) => {
     }
     return objectName;
 };
-export const ghostmakerQueryKey = "react-ghostmaker";
-export const getGhostId = (queryKey) => {
-    return queryKey.join(".");
+const getArgKey = (arg) => {
+    if (is.primitive(arg)) {
+        return String(arg);
+    }
+    return hashObject(arg);
 };
 export const queries = {
-    ghostmaker: () => [ghostmakerQueryKey],
-    model: (model) => [
+    ghostmaker: () => ["react-ghostmaker"],
+    target: (target) => [
         ...queries.ghostmaker(),
-        getObjectQueryKey(model),
+        getTargetQueryKey(target),
     ],
-    chainItem: (chainItem) => {
+    chainItem: (prev, chainItem) => {
         const { propName, args = [] } = chainItem;
-        return [propName, ...args.map(getObjectQueryKey)];
+        return [...prev, propName, ...args.map(getArgKey)];
     },
-    ghostChain: (model, chain) => [
-        ...queries.model(model),
-        ...chain.flatMap(queries.chainItem),
-    ],
+    ghostChain: (target, chain) => chain.reduce(queries.chainItem, queries.target(target)),
 };

package/dist/esm/resolveGhostChain.js

@@ -2,7 +2,6 @@ import is, { assert } from "@sindresorhus/is";
 import { isReactGhost, transformFnProp, } from "./types";
 const resolveGhostChainItem = async (target, item) => {
     const { propName, args } = item;
-    const model = target;
     if (propName === transformFnProp) {
         assert.array(args);
         const transformFn = args[0];
@@ -13,10 +12,11 @@ const resolveGhostChainItem = async (target, item) => {
         }
         return transformed;
     }
-    if (is.nullOrUndefined(model)) {
+    if (is.nullOrUndefined(target)) {
         return undefined;
     }
-    const property = model[propName];
+    assert.object(target);
+    const property = target[propName];
     if (args === undefined) {
         return property;
     }
@@ -24,8 +24,8 @@ const resolveGhostChainItem = async (target, item) => {
     const asyncFn = property.bind(target);
     return await asyncFn(...args);
 };
-export const resolveGhostChain = async (initialModel, stack) => {
-    let result = initialModel;
+export const resolveGhostChain = async (target, stack) => {
+    let result = target;
     for (const item of stack) {
         result = await resolveGhostChainItem(result, item);
     }

package/dist/esm/testMocks.js

@@ -1,6 +1,11 @@
 import { beforeEach, vitest } from "vitest";
-import { getGhostId, makeGhost, registerModelIdentifier } from ".";
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+import { getQueryContext, makeGhost, registerModelIdentifier } from ".";
+const sleep = () => new Promise((resolve) => setTimeout(resolve, 200));
+export const advanceSleepTimer = async (times = 1) => {
+    for (let i = 0; i < times; i++) {
+        await vitest.advanceTimersByTimeAsync(200);
+    }
+};
 export let customerMocks;
 export let projectMocks;
 export const getCustomerNameGhostIds = {};
@@ -9,7 +14,7 @@ beforeEach(() => {
     getCustomerNameGhostIds.current = undefined;
     customerMocks = {
         getName: vitest.fn().mockImplementation(() => {
-            getCustomerNameGhostIds.current = getGhostId();
+            getCustomerNameGhostIds.current = getQueryContext();
         }),
         getDetailed: vitest
             .fn()
@@ -48,7 +53,7 @@ export class Customer {
         return Customer.get(this.id);
     }
     static async get(id) {
-        await sleep(5);
+        await sleep();
         return customerMocks.getDetailed(id);
     }
 }
@@ -61,11 +66,11 @@ export class Project {
         return new Project(id);
     }
     async getDetailed() {
-        await sleep(5);
+        await sleep();
         return projectMocks.getDetailed(this.id);
     }
     async findDetailed() {
-        await sleep(5);
+        await sleep();
         return projectMocks.findDetailed(this.id);
     }
 }
@@ -84,7 +89,7 @@ export class ProjectDetailed {
     }
     async getStatus() {
         projectMocks.getStatus();
-        await sleep(5);
+        await sleep();
         return "active";
     }
 }

package/dist/esm/useGhostChain.js

@@ -1,78 +1,80 @@
 import is, { assert } from "@sindresorhus/is";
-import { useMemo } from "react";
+import { useEffect, useEffectEvent, useMemo, useRef } from "react";
 import { transformFnProp, } from "./types";
-import { useQuery, useQueryClient, useSuspenseQuery, } from "@tanstack/react-query";
-import { getGhostId, queries } from "./queries";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { queries } from "./queries";
 import { ghostFnContext } from "./context";
 import { invalidateGhosts } from "./invalidate";
-const useVoidQuery = () => useQuery({
-    queryKey: ["void"],
-    queryFn: () => Promise.resolve({
-        result: true,
-    }),
-});
+import { hashObject } from "./hash";
+export const useGhostChain = (target, chain, options) => {
+    const queryClient = useQueryClient();
+    const context = {
+        queryKey: queries.target(target),
+    };
+    const value = chain.reduce((currentTarget, item) => useGhostChainItem(currentTarget, item, options, context), target);
+    const invalidate = () => invalidateGhosts(queryClient, queries.ghostChain(target, chain));
+    return {
+        value,
+        invalidate,
+    };
+};
 const useGhostChainItem = (target, item, options = {}, context) => {
     const { propName, args } = item;
-    const model = target;
     if (propName === transformFnProp) {
         assert.array(args);
         const transformFn = args[0];
         assert.function(transformFn, "transform requires a mapping function");
         const transformDependencies = args[1] ?? [];
         assert.array(transformDependencies);
-        return useMemo(() => transformFn(model), [model, ...transformDependencies]);
+        return useMemo(() => transformFn(target), [target, ...transformDependencies]);
     }
-    if (is.nullOrUndefined(model)) {
-        if (args) {
-            useVoidQuery();
-        }
-        return model;
+    if (is.nullOrUndefined(target)) {
+        return target;
     }
-    const modelPropertyName = propName;
-    const modelProperty = model[modelPropertyName];
-    context.queryKey.push(...queries.chainItem(item));
+    assert.object(target);
+    const targetPropertyName = propName;
+    const targetProperty = target[targetPropertyName];
+    context.queryKey = queries.chainItem(context.queryKey, item);
     if (args === undefined) {
         // no function call, just a property access
-        return modelProperty;
+        return targetProperty;
     }
-    assert.function(modelProperty);
-    const modelFn = modelProperty.bind(model);
+    assert.function(targetProperty);
+    const targetFn = targetProperty.bind(target);
     const queryKey = [...context.queryKey];
     const query = useSuspenseQuery({
         ...options,
-        queryKey: [...context.queryKey],
-        queryFn: async () => {
-            const modelFnWithContext = ghostFnContext.bind({ ghostId: context.ghostId }, modelFn);
-            const result = await modelFnWithContext(...args);
-            if (result instanceof Promise) {
-                return { result: await result };
-            }
-            return { result };
-        },
-        meta: {
-            ghostId: context.ghostId,
-            queryKey,
+        queryKey,
+        queryFn: async (ctx) => {
+            const targetFnWithContext = ghostFnContext.bind({ query: ctx }, targetFn);
+            return { result: await targetFnWithContext(...args) };
         },
     });
+    useTargetAutoInvalidate(target, queryKey);
     if (query.error) {
         throw query.error;
     }
     return query.data.result;
 };
-export const useGhostChain = (initialModel, chain, options) => {
+const useTargetAutoInvalidate = (target, queryKey) => {
     const queryClient = useQueryClient();
-    const chainQueryId = queries.ghostChain(initialModel, chain);
-    const ghostId = getGhostId(chainQueryId);
-    const context = {
-        queryKey: queries.model(initialModel),
-        ghostId,
-    };
-    const value = chain.reduce((model, item) => useGhostChainItem(model, item, options, context), initialModel);
-    const invalidate = () => {
-        invalidateGhosts(queryClient, initialModel, chain);
-    };
-    return {
-        value,
-        invalidate,
-    };
+    const invalidate = () => queryClient.invalidateQueries({
+        queryKey,
+    });
+    const targetHash = hashObject(target);
+    const prevTargetHash = useRef(targetHash);
+    const joinedQueryKey = queryKey.join(".");
+    const prevQueryId = useRef(joinedQueryKey);
+    const needsRefresh = prevQueryId.current === joinedQueryKey &&
+        prevTargetHash.current !== targetHash;
+    prevTargetHash.current = targetHash;
+    prevQueryId.current = joinedQueryKey;
+    const onTargetChangeEvent = useEffectEvent(() => {
+        if (needsRefresh) {
+            invalidate();
+        }
+    });
+    useEffect(() => {
+        onTargetChangeEvent();
+    }, [needsRefresh]);
 };

package/dist/types/context.d.ts

@@ -1,6 +1,14 @@
+import type { QueryFunctionContext } from "@tanstack/react-query";
 export interface GhostFnContext {
-    ghostId?: string;
+    query?: QueryFunctionContext;
     [key: string]: unknown;
 }
 export declare const ghostFnContext: import("context").CtxCascadeApi<GhostFnContext>;
-export declare const getGhostId: () => string | undefined;
+export declare const getQueryContext: () => {
+    client: import("@tanstack/react-query").QueryClient;
+    queryKey: readonly unknown[];
+    signal: AbortSignal;
+    meta: import("@tanstack/react-query").QueryMeta | undefined;
+    pageParam?: unknown;
+    direction?: unknown;
+} | undefined;

package/dist/types/hash.d.ts

@@ -1 +1 @@
-export declare const hashObject: (model: object) => number;
+export declare const hashObject: (obj: object) => number;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export { makeGhost } from "./makeGhost";
 export { type ReactGhost, UseGhostReturn } from "./types";
-export { getGhostId } from "./context";
-export { invalidateGhostsById } from "./invalidate";
+export { getQueryContext } from "./context";
+export { invalidateGhosts } from "./invalidate";
 export { registerModelIdentifier } from "./modelIdentifier";
 export * from "./maybeGhost";

package/dist/types/invalidate.d.ts

@@ -1,4 +1,3 @@
 import { type QueryClient } from "@tanstack/react-query";
-import type { GhostChain } from "./types";
-export declare const invalidateGhostsById: (queryClient: QueryClient, ghostId: string) => void;
-export declare function invalidateGhosts(queryClient: QueryClient, model: unknown, chain: GhostChain): void;
+import type { QueryKey } from "./types";
+export declare function invalidateGhosts(queryClient: QueryClient, queryKey: QueryKey): Promise<void>;

package/dist/types/makeGhost.d.ts

@@ -1,2 +1,2 @@
 import { type ReactGhost } from "./types";
-export declare function makeGhost<T>(model: T): ReactGhost<T>;
+export declare function makeGhost<T>(target: T): ReactGhost<T>;

package/dist/types/queries.d.ts

@@ -1,10 +1,7 @@
 import type { GhostChain, GhostChainItem, QueryKey } from "./types";
-export declare const getObjectQueryKey: (something: unknown) => string;
-export declare const ghostmakerQueryKey = "react-ghostmaker";
-export declare const getGhostId: (queryKey: QueryKey) => string;
 export declare const queries: {
     ghostmaker: () => string[];
-    model: (model: unknown) => string[];
-    chainItem: (chainItem: GhostChainItem) => string[];
-    ghostChain: (model: unknown, chain: GhostChain) => string[];
+    target: (target: unknown) => string[];
+    chainItem: (prev: QueryKey, chainItem: GhostChainItem) => unknown[];
+    ghostChain: (target: unknown, chain: GhostChain) => unknown[];
 };

package/dist/types/resolveGhostChain.d.ts

@@ -1,2 +1,2 @@
-import { type GhostChain, type ExplicitAny } from "./types";
-export declare const resolveGhostChain: (initialModel: ExplicitAny, stack: GhostChain) => Promise<any>;
+import { type GhostChain } from "./types";
+export declare const resolveGhostChain: (target: unknown, stack: GhostChain) => Promise<unknown>;

package/dist/types/testMocks.d.ts

@@ -1,3 +1,5 @@
+import type { QueryFunctionContext } from "@tanstack/react-query";
+export declare const advanceSleepTimer: (times?: number) => Promise<void>;
 export declare let customerMocks: {
     getName: () => void;
     getDetailed: (id: string) => CustomerDetailed;
@@ -9,7 +11,7 @@ export declare let projectMocks: {
     getStatus: () => void;
 };
 export declare const getCustomerNameGhostIds: {
-    current?: string | undefined;
+    current?: QueryFunctionContext | undefined;
 };
 export declare class CustomerDetailed {
     readonly id: string;

package/dist/types/types.d.ts

@@ -13,7 +13,7 @@ export interface ReactGhostMethods<T> extends Promise<T> {
     use: (options?: useGhostOptions) => T;
     render: (transform?: (item: T) => ReactNode) => ReactNode;
     transform: <U, U2 = U>(fn: (item: T extends ReactGhost<infer T2> ? T2 : T) => U2, dependencies?: DependencyList) => ReactGhost<U2>;
-    invalidate: (queryClient: QueryClient) => void;
+    invalidate: (queryClient: QueryClient) => Promise<void>;
 }
 export declare const transformFnProp: "___transformFn";
 export declare const isGhostMarker: "___ghostMarker";
@@ -25,12 +25,11 @@ export interface GhostChainItem {
     args?: ExplicitAny[];
 }
 export type GhostChain = GhostChainItem[];
-export type GhostChainModelType = UnknownRecord | Class<unknown> | null | undefined;
-export type QueryKey = string[];
-export type InvalidateGhostFn = () => void;
+export type GhostChainTargetType = UnknownRecord | Class<unknown> | null | undefined;
+export type QueryKey = readonly unknown[];
+export type InvalidateGhostFn = () => Promise<void>;
 export interface GhostChainContext {
     queryKey: QueryKey;
-    ghostId: string;
 }
 export interface UseGhostReturn<T> {
     value: T;

package/dist/types/useGhostChain.d.ts

@@ -1,2 +1,2 @@
 import { type GhostChain, type useGhostOptions, type UseGhostReturn } from "./types";
-export declare const useGhostChain: <T>(initialModel: unknown, chain: GhostChain, options?: useGhostOptions) => UseGhostReturn<T>;
+export declare const useGhostChain: <T>(target: unknown, chain: GhostChain, options?: useGhostOptions) => UseGhostReturn<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/react-ghostmaker",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Mittwald CM Service GmbH & Co. KG <opensource@mittwald.de>",
   "contributors": [
     "Marco Falkenberg <m.falkenberg@mittwald.de>"