houdini-react 1.2.45 → 1.2.47

package/build/plugin-cjs/index.js

@@ -76800,9 +76800,12 @@ var InMemorySubscriptions = class {
   removeSubscribers(id, fieldName, specs) {
     let targets = [];
     const subscriber = this.subscribers.get(id);
-    const subscriberField = subscriber?.get(fieldName);
+    if (!subscriber) {
+      return;
+    }
+    const subscriberField = subscriber.get(fieldName);
     for (const spec of specs) {
-      const counts = subscriber?.get(fieldName)?.referenceCounts;
+      const counts = subscriber.get(fieldName)?.referenceCounts;
       if (!counts?.has(spec.set)) {
         continue;
       }
@@ -76812,12 +76815,18 @@ var InMemorySubscriptions = class {
         targets.push(spec.set);
         counts.delete(spec.set);
       }
+      if (counts.size === 0) {
+        subscriber.delete(fieldName);
+      }
     }
     if (subscriberField) {
       subscriberField.selections = this.get(id, fieldName).filter(
         ([{ set }]) => !targets.includes(set)
       );
     }
+    if (subscriber.size === 0) {
+      this.subscribers.delete(id);
+    }
   }
   removeAllSubscribers(id, targets, visited = []) {
     visited.push(id);
@@ -76838,6 +76847,15 @@ var InMemorySubscriptions = class {
       }
     }
   }
+  get size() {
+    let size = 0;
+    for (const [, nodeCounts] of this.subscribers) {
+      for (const [, { referenceCounts }] of nodeCounts) {
+        size += [...referenceCounts.values()].reduce((size2, count) => size2 + count, 0);
+      }
+    }
+    return size;
+  }
 };
 var Cache = class {
   _internal_unstable;
@@ -76884,6 +76902,9 @@ var Cache = class {
     };
   }
   subscribe(spec, variables = {}) {
+    if (this._internal_unstable.disabled) {
+      return;
+    }
     return this._internal_unstable.subscriptions.add({
       parent: spec.parentID || rootID,
       spec,
@@ -77023,7 +77044,7 @@ var Cache = class {
   }
 };
 var CacheInternal = class {
-  _disabled = false;
+  disabled = false;
   _config;
   storage;
   subscriptions;
@@ -77054,10 +77075,10 @@ var CacheInternal = class {
     this._config = config;
     this.componentCache = componentCache ?? {};
     this.createComponent = createComponent ?? (() => ({}));
-    this._disabled = disabled;
+    this.disabled = disabled;
     try {
       if (process.env.HOUDINI_TEST === "true") {
-        this._disabled = false;
+        this.disabled = false;
       }
     } catch {
     }
@@ -77079,7 +77100,7 @@ var CacheInternal = class {
     forceNotify,
     forceStale
   }) {
-    if (this._disabled) {
+    if (this.disabled) {
       return [];
     }
     let targetSelection = getFieldsForType(
@@ -77863,7 +77884,12 @@ function deepMerge2(filepath, ...targets) {
 }
 function parseJS(str, config) {
   const defaultConfig = {
-    plugins: ["typescript", "importAssertions", "decorators-legacy"],
+    plugins: [
+      "typescript",
+      "importAssertions",
+      "decorators-legacy",
+      "explicitResourceManagement"
+    ],
     sourceType: "module"
   };
   return (0, import_parser.parse)(str || "", config ? deepMerge2("", defaultConfig, config) : defaultConfig).program;
@@ -78809,7 +78835,18 @@ async function extractQueries(source) {
   } else {
     return [];
   }
-  return props.filter((p) => p !== "children");
+  return props.reduce((queries, query2) => {
+    if (query2 === "children") {
+      return queries;
+    }
+    if (query2.endsWith("$handle")) {
+      query2 = query2.substring(0, query2.length - "$handle".length);
+    }
+    if (queries.includes(query2)) {
+      return queries;
+    }
+    return queries.concat([query2]);
+  }, []);
 }
 function isSecondaryBuild() {
   return process.env.HOUDINI_SECONDARY_BUILD && process.env.HOUDINI_SECONDARY_BUILD !== "false";
@@ -79850,6 +79887,13 @@ var vite_default = {
 							initialVariables: variables,
 						})
 
+						// initialize the observer we just created
+						observer.send({
+							setup: true,
+							variables,
+							session: window.__houdini__initial__session__,
+						})
+
 						// save it in the cache
 						initialData[artifactName] = observer
 						initialVariables[artifactName] = variables

package/build/plugin-esm/index.js

@@ -76790,9 +76790,12 @@ var InMemorySubscriptions = class {
   removeSubscribers(id, fieldName, specs) {
     let targets = [];
     const subscriber = this.subscribers.get(id);
-    const subscriberField = subscriber?.get(fieldName);
+    if (!subscriber) {
+      return;
+    }
+    const subscriberField = subscriber.get(fieldName);
     for (const spec of specs) {
-      const counts = subscriber?.get(fieldName)?.referenceCounts;
+      const counts = subscriber.get(fieldName)?.referenceCounts;
       if (!counts?.has(spec.set)) {
         continue;
       }
@@ -76802,12 +76805,18 @@ var InMemorySubscriptions = class {
         targets.push(spec.set);
         counts.delete(spec.set);
       }
+      if (counts.size === 0) {
+        subscriber.delete(fieldName);
+      }
     }
     if (subscriberField) {
       subscriberField.selections = this.get(id, fieldName).filter(
         ([{ set }]) => !targets.includes(set)
       );
     }
+    if (subscriber.size === 0) {
+      this.subscribers.delete(id);
+    }
   }
   removeAllSubscribers(id, targets, visited = []) {
     visited.push(id);
@@ -76828,6 +76837,15 @@ var InMemorySubscriptions = class {
       }
     }
   }
+  get size() {
+    let size = 0;
+    for (const [, nodeCounts] of this.subscribers) {
+      for (const [, { referenceCounts }] of nodeCounts) {
+        size += [...referenceCounts.values()].reduce((size2, count) => size2 + count, 0);
+      }
+    }
+    return size;
+  }
 };
 var Cache = class {
   _internal_unstable;
@@ -76874,6 +76892,9 @@ var Cache = class {
     };
   }
   subscribe(spec, variables = {}) {
+    if (this._internal_unstable.disabled) {
+      return;
+    }
     return this._internal_unstable.subscriptions.add({
       parent: spec.parentID || rootID,
       spec,
@@ -77013,7 +77034,7 @@ var Cache = class {
   }
 };
 var CacheInternal = class {
-  _disabled = false;
+  disabled = false;
   _config;
   storage;
   subscriptions;
@@ -77044,10 +77065,10 @@ var CacheInternal = class {
     this._config = config;
     this.componentCache = componentCache ?? {};
     this.createComponent = createComponent ?? (() => ({}));
-    this._disabled = disabled;
+    this.disabled = disabled;
     try {
       if (process.env.HOUDINI_TEST === "true") {
-        this._disabled = false;
+        this.disabled = false;
       }
     } catch {
     }
@@ -77069,7 +77090,7 @@ var CacheInternal = class {
     forceNotify,
     forceStale
   }) {
-    if (this._disabled) {
+    if (this.disabled) {
       return [];
     }
     let targetSelection = getFieldsForType(
@@ -77853,7 +77874,12 @@ function deepMerge2(filepath, ...targets) {
 }
 function parseJS(str, config) {
   const defaultConfig = {
-    plugins: ["typescript", "importAssertions", "decorators-legacy"],
+    plugins: [
+      "typescript",
+      "importAssertions",
+      "decorators-legacy",
+      "explicitResourceManagement"
+    ],
     sourceType: "module"
   };
   return (0, import_parser.parse)(str || "", config ? deepMerge2("", defaultConfig, config) : defaultConfig).program;
@@ -78799,7 +78825,18 @@ async function extractQueries(source) {
   } else {
     return [];
   }
-  return props.filter((p) => p !== "children");
+  return props.reduce((queries, query2) => {
+    if (query2 === "children") {
+      return queries;
+    }
+    if (query2.endsWith("$handle")) {
+      query2 = query2.substring(0, query2.length - "$handle".length);
+    }
+    if (queries.includes(query2)) {
+      return queries;
+    }
+    return queries.concat([query2]);
+  }, []);
 }
 function isSecondaryBuild() {
   return process.env.HOUDINI_SECONDARY_BUILD && process.env.HOUDINI_SECONDARY_BUILD !== "false";
@@ -79840,6 +79877,13 @@ var vite_default = {
 							initialVariables: variables,
 						})
 
+						// initialize the observer we just created
+						observer.send({
+							setup: true,
+							variables,
+							session: window.__houdini__initial__session__,
+						})
+
 						// save it in the cache
 						initialData[artifactName] = observer
 						initialVariables[artifactName] = variables

package/build/runtime/hooks/useDocumentHandle.d.ts

@@ -10,6 +10,8 @@ export declare function useDocumentHandle<_Artifact extends QueryArtifact, _Data
 export type DocumentHandle<_Artifact extends QueryArtifact, _Data extends GraphQLObject = GraphQLObject, _Input extends GraphQLVariables = GraphQLVariables> = {
     data: _Data;
     partial: boolean;
+    fetch: FetchFn<_Data, Partial<_Input>>;
+    variables: _Input;
 } & RefetchHandlers<_Artifact, _Data, _Input>;
 type RefetchHandlers<_Artifact extends QueryArtifact, _Data extends GraphQLObject, _Input> = _Artifact extends {
     refetch: {

package/build/runtime/routing/Router.d.ts

@@ -5,6 +5,7 @@ import { GraphQLObject, GraphQLVariables } from '$houdini/runtime/lib/types';
 import { QueryArtifact } from '$houdini/runtime/lib/types';
 import type { RouterManifest } from '$houdini/runtime/router/types';
 import React from 'react';
+import { DocumentHandle } from '../hooks/useDocumentHandle';
 import { SuspenseCache } from './cache';
 type ComponentType = any;
 /**
@@ -21,6 +22,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 export declare const useLocation: () => {
     pathname: string;
     params: Record<string, any>;
+    goto: (url: string) => void;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;
@@ -54,7 +56,7 @@ export declare function useCache(): Cache;
 export declare function updateLocalSession(session: App.Session): void;
 export declare function useSession(): [App.Session, (newSession: Partial<App.Session>) => void];
 export declare function useCurrentVariables(): GraphQLVariables;
-export declare function useQueryResult<_Data extends GraphQLObject, _Input extends GraphQLVariables>(name: string): [_Data | null, DocumentStore<_Data, _Input>];
+export declare function useQueryResult<_Data extends GraphQLObject, _Input extends GraphQLVariables>(name: string): [_Data | null, DocumentHandle<any, _Data, _Input>];
 export type RouterCache = {
     artifact_cache: SuspenseCache<QueryArtifact>;
     component_cache: SuspenseCache<(props: any) => React.ReactElement>;

package/build/runtime-cjs/clientPlugin.js

@@ -23,11 +23,11 @@ __export(clientPlugin_exports, {
 module.exports = __toCommonJS(clientPlugin_exports);
 const plugin = () => () => {
   return {
-    beforeNetwork(ctx, { next }) {
+    start(ctx, { next }) {
       next({
         ...ctx,
         cacheParams: {
-          ...ctx.fetchParams,
+          ...ctx.cacheParams,
           serverSideFallback: false
         }
       });

package/build/runtime-cjs/hooks/useDocumentHandle.d.ts

@@ -10,6 +10,8 @@ export declare function useDocumentHandle<_Artifact extends QueryArtifact, _Data
 export type DocumentHandle<_Artifact extends QueryArtifact, _Data extends GraphQLObject = GraphQLObject, _Input extends GraphQLVariables = GraphQLVariables> = {
     data: _Data;
     partial: boolean;
+    fetch: FetchFn<_Data, Partial<_Input>>;
+    variables: _Input;
 } & RefetchHandlers<_Artifact, _Data, _Input>;
 type RefetchHandlers<_Artifact extends QueryArtifact, _Data extends GraphQLObject, _Input> = _Artifact extends {
     refetch: {

package/build/runtime-cjs/hooks/useDocumentHandle.js

@@ -39,7 +39,15 @@ function useDocumentHandle({
 }) {
   const [forwardPending, setForwardPending] = import_react.default.useState(false);
   const [backwardPending, setBackwardPending] = import_react.default.useState(false);
+  const location = (0, import_Router.useLocation)();
   const [session] = (0, import_Router.useSession)();
+  const client = (0, import_Router.useClient)();
+  const paginationObserver = import_react.default.useMemo(() => {
+    if (!artifact.refetch?.paginated) {
+      return null;
+    }
+    return client.observe({ artifact });
+  }, [artifact.name]);
   return import_react.default.useMemo(() => {
     const wrapLoad = (setLoading, fn) => {
       return async (value) => {
@@ -49,13 +57,27 @@ function useDocumentHandle({
         return result;
       };
     };
-    const fetchQuery = (args) => observer.send({
-      ...args,
-      session
-    });
+    const fetchQuery = (args) => {
+      const usedVariables = Object.fromEntries(
+        Object.keys(observer.artifact.input?.fields ?? {}).map((fieldName) => [
+          fieldName,
+          location.params[fieldName]
+        ])
+      );
+      return observer.send({
+        ...args,
+        variables: {
+          ...usedVariables,
+          ...args?.variables
+        },
+        session
+      });
+    };
     if (artifact.kind !== import_types.ArtifactKind.Query || !artifact.refetch?.paginated) {
       return {
+        artifact,
         data: storeValue.data,
+        variables: storeValue.variables,
         fetch: fetchQuery,
         partial: storeValue.partial
       };
@@ -67,12 +89,12 @@ function useDocumentHandle({
         getVariables: () => storeValue.variables,
         fetch: fetchQuery,
         fetchUpdate: (args, updates) => {
-          return observer.send({
+          return paginationObserver.send({
             ...args,
             cacheParams: {
+              ...args?.cacheParams,
               disableSubscriptions: true,
-              applyUpdates: updates,
-              ...args?.cacheParams
+              applyUpdates: updates
             },
             session
           });
@@ -80,7 +102,9 @@ function useDocumentHandle({
         getSession: async () => session
       });
       return {
+        artifact,
         data: storeValue.data,
+        variables: storeValue.variables,
         fetch: handlers.fetch,
         partial: storeValue.partial,
         loadNext: wrapLoad(setForwardPending, handlers.loadNextPage),
@@ -98,7 +122,7 @@ function useDocumentHandle({
         storeName: artifact.name,
         fetch: fetchQuery,
         fetchUpdate: async (args, updates = ["append"]) => {
-          return observer.send({
+          return paginationObserver.send({
             ...args,
             cacheParams: {
               disableSubscriptions: true,
@@ -110,7 +134,9 @@ function useDocumentHandle({
         getSession: async () => session
       });
       return {
+        artifact,
         data: storeValue.data,
+        variables: storeValue.variables,
         fetch: handlers.fetch,
         partial: storeValue.partial,
         loadNext: wrapLoad(setForwardPending, handlers.loadNextPage),
@@ -118,12 +144,14 @@ function useDocumentHandle({
       };
     }
     return {
+      artifact,
       data: storeValue.data,
+      variables: storeValue.variables,
       fetch: fetchQuery,
       refetch: fetchQuery,
       partial: storeValue.partial
     };
-  }, [artifact, observer, session, storeValue, true, true]);
+  }, [artifact, observer, session, storeValue]);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/runtime-cjs/routing/Router.d.ts

@@ -5,6 +5,7 @@ import { GraphQLObject, GraphQLVariables } from '$houdini/runtime/lib/types';
 import { QueryArtifact } from '$houdini/runtime/lib/types';
 import type { RouterManifest } from '$houdini/runtime/router/types';
 import React from 'react';
+import { DocumentHandle } from '../hooks/useDocumentHandle';
 import { SuspenseCache } from './cache';
 type ComponentType = any;
 /**
@@ -21,6 +22,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 export declare const useLocation: () => {
     pathname: string;
     params: Record<string, any>;
+    goto: (url: string) => void;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;
@@ -54,7 +56,7 @@ export declare function useCache(): Cache;
 export declare function updateLocalSession(session: App.Session): void;
 export declare function useSession(): [App.Session, (newSession: Partial<App.Session>) => void];
 export declare function useCurrentVariables(): GraphQLVariables;
-export declare function useQueryResult<_Data extends GraphQLObject, _Input extends GraphQLVariables>(name: string): [_Data | null, DocumentStore<_Data, _Input>];
+export declare function useQueryResult<_Data extends GraphQLObject, _Input extends GraphQLVariables>(name: string): [_Data | null, DocumentHandle<any, _Data, _Input>];
 export type RouterCache = {
     artifact_cache: SuspenseCache<QueryArtifact>;
     component_cache: SuspenseCache<(props: any) => React.ReactElement>;

package/build/runtime-cjs/routing/Router.js

@@ -46,6 +46,7 @@ var import_scalars = require("$houdini/runtime/lib/scalars");
 var import_match = require("$houdini/runtime/router/match");
 var import_react = __toESM(require("react"));
 var import_react2 = require("react");
+var import_useDocumentHandle = require("../hooks/useDocumentHandle");
 var import_useDocumentStore = require("../hooks/useDocumentStore");
 var import_cache = require("./cache");
 const PreloadWhich = {
@@ -62,7 +63,7 @@ function Router({
   const [currentURL, setCurrentURL] = import_react.default.useState(() => {
     return initialURL || window.location.pathname;
   });
-  const [page, variables] = (0, import_match.find_match)(manifest, currentURL);
+  const [page, variables] = (0, import_match.find_match)(import_config.default, manifest, currentURL);
   if (!page) {
     throw new Error("404");
   }
@@ -72,7 +73,7 @@ function Router({
     assetPrefix,
     injectToStream
   });
-  const { component_cache } = useRouterContext();
+  const { component_cache, data_cache } = useRouterContext();
   const PageComponent = component_cache.get(page.id);
   import_react.default.useEffect(() => {
     if (globalThis.window && window.location.pathname !== currentURL) {
@@ -91,21 +92,36 @@ function Router({
       window.removeEventListener("popstate", onChange);
     };
   }, []);
+  const goto = (url) => {
+    data_cache.clear();
+    setCurrentURL(url);
+  };
   useLinkBehavior({
-    goto: (val) => {
-      setCurrentURL(val);
-    },
+    goto,
     preload(url, which) {
-      const [page2, variables2] = (0, import_match.find_match)(manifest, url);
-      if (["both", "component"].includes(which)) {
+      const [page2, variables2] = (0, import_match.find_match)(import_config.default, manifest, url);
+      if (!page2) {
+        return;
+      }
+      if (["page", "component"].includes(which)) {
         loadComponent(page2);
       }
-      if (["both", "data"].includes(which)) {
+      if (["page", "data"].includes(which)) {
         loadData(page2, variables2);
       }
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LocationContext.Provider, { value: { pathname: currentURL, params: variables ?? {} }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageComponent, { url: currentURL }, page.id) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    LocationContext.Provider,
+    {
+      value: {
+        pathname: currentURL,
+        goto,
+        params: variables ?? {}
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageComponent, { url: currentURL }, page.id)
+    }
+  ) });
 }
 const useLocation = () => (0, import_react2.useContext)(LocationContext);
 function usePageData({
@@ -124,9 +140,13 @@ function usePageData({
     last_variables
   } = useRouterContext();
   const [session] = useSession();
-  function load_query({ id, artifact }) {
+  function load_query({
+    id,
+    artifact,
+    variables: variables2
+  }) {
     for (const artifact2 of Object.keys(page.documents)) {
-      last_variables.set(artifact2, variables);
+      last_variables.set(artifact2, variables2);
     }
     if (ssr_signals.has(id)) {
       return ssr_signals.get(id);
@@ -140,8 +160,7 @@ function usePageData({
       resolve = res;
       reject = rej;
       observer.send({
-        variables,
-        cacheParams: { disableSubscriptions: true },
+        variables: variables2,
         session
       }).then(async () => {
         data_cache.set(id, observer);
@@ -177,13 +196,14 @@ function usePageData({
 										variables: ${JSON.stringify(
           (0, import_scalars.marshalInputs)({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: import_config.default
           })
         )}
+									}).then(() => {
+										window.__houdini__nav_caches__?.data_cache.set(artifactName, new_store)
 									})
 
-									window.__houdini__nav_caches__?.data_cache.set(artifactName, new_store)
 								}
 
 
@@ -217,7 +237,7 @@ function usePageData({
 											variables: ${JSON.stringify(
           (0, import_scalars.marshalInputs)({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: import_config.default
           })
         )}
@@ -242,6 +262,9 @@ function usePageData({
     return resolvable;
   }
   function loadData(targetPage, variables2) {
+    if (!targetPage) {
+      return;
+    }
     for (const [artifact, { variables: pageVariables }] of Object.entries(
       targetPage.documents
     )) {
@@ -274,14 +297,14 @@ function usePageData({
         injectToStream?.(`
 						<script type="module" src="${assetPrefix}/artifacts/${artifact.name}.js" async=""><\/script>
 					`);
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }).catch((err) => {
         console.log(err);
       });
     }
     for (const artifact of Object.values(found_artifacts)) {
       if (!data_cache.has(artifact.name)) {
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }
     }
   }
@@ -389,18 +412,27 @@ function useCurrentVariables() {
 const VariableContext = import_react.default.createContext(null);
 const LocationContext = import_react.default.createContext({
   pathname: "",
-  params: {}
+  params: {},
+  goto: () => {
+  }
 });
 function useQueryResult(name) {
-  const store_ref = useRouterContext().data_cache.get(name);
-  const [{ data, errors }, observer] = (0, import_useDocumentStore.useDocumentStore)({
+  const { data_cache, artifact_cache } = useRouterContext();
+  const store_ref = data_cache.get(name);
+  const [storeValue, observer] = (0, import_useDocumentStore.useDocumentStore)({
     artifact: store_ref.artifact,
     observer: store_ref
   });
+  const { data, errors } = storeValue;
   if (errors && errors.length > 0) {
     throw new Error(JSON.stringify(errors));
   }
-  return [data, observer];
+  const handle = (0, import_useDocumentHandle.useDocumentHandle)({
+    artifact: artifact_cache.get(name),
+    observer,
+    storeValue
+  });
+  return [data, handle];
 }
 function useLinkBehavior({
   goto,
@@ -443,10 +475,14 @@ function usePreload({ preload }) {
   import_react.default.useEffect(() => {
     const mouseMove = (e) => {
       const target = e.target;
-      if (!(target instanceof HTMLAnchorElement)) {
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      const anchor = target.closest("a");
+      if (!anchor) {
         return;
       }
-      let preloadWhichRaw = target.attributes.getNamedItem("data-houdini-preload")?.value;
+      let preloadWhichRaw = anchor.attributes.getNamedItem("data-houdini-preload")?.value;
       let preloadWhich = !preloadWhichRaw || preloadWhichRaw === "true" ? "page" : preloadWhichRaw;
       if (!PreloadWhich[preloadWhich]) {
         console.log(
@@ -458,7 +494,7 @@ function usePreload({ preload }) {
         clearTimeout(timeoutRef.current);
       }
       timeoutRef.current = setTimeout(() => {
-        const url = target.attributes.getNamedItem("href")?.value;
+        const url = anchor.attributes.getNamedItem("href")?.value;
         if (!url) {
           return;
         }

package/build/runtime-esm/clientPlugin.js

@@ -1,10 +1,10 @@
 const plugin = () => () => {
   return {
-    beforeNetwork(ctx, { next }) {
+    start(ctx, { next }) {
       next({
         ...ctx,
         cacheParams: {
-          ...ctx.fetchParams,
+          ...ctx.cacheParams,
           serverSideFallback: false
         }
       });

package/build/runtime-esm/hooks/useDocumentHandle.d.ts

@@ -10,6 +10,8 @@ export declare function useDocumentHandle<_Artifact extends QueryArtifact, _Data
 export type DocumentHandle<_Artifact extends QueryArtifact, _Data extends GraphQLObject = GraphQLObject, _Input extends GraphQLVariables = GraphQLVariables> = {
     data: _Data;
     partial: boolean;
+    fetch: FetchFn<_Data, Partial<_Input>>;
+    variables: _Input;
 } & RefetchHandlers<_Artifact, _Data, _Input>;
 type RefetchHandlers<_Artifact extends QueryArtifact, _Data extends GraphQLObject, _Input> = _Artifact extends {
     refetch: {

package/build/runtime-esm/hooks/useDocumentHandle.js

@@ -2,7 +2,7 @@ import { extractPageInfo } from "$houdini/runtime/lib/pageInfo";
 import { cursorHandlers, offsetHandlers } from "$houdini/runtime/lib/pagination";
 import { ArtifactKind } from "$houdini/runtime/lib/types";
 import React from "react";
-import { useSession } from "../routing/Router";
+import { useClient, useLocation, useSession } from "../routing/Router";
 function useDocumentHandle({
   artifact,
   observer,
@@ -10,7 +10,15 @@ function useDocumentHandle({
 }) {
   const [forwardPending, setForwardPending] = React.useState(false);
   const [backwardPending, setBackwardPending] = React.useState(false);
+  const location = useLocation();
   const [session] = useSession();
+  const client = useClient();
+  const paginationObserver = React.useMemo(() => {
+    if (!artifact.refetch?.paginated) {
+      return null;
+    }
+    return client.observe({ artifact });
+  }, [artifact.name]);
   return React.useMemo(() => {
     const wrapLoad = (setLoading, fn) => {
       return async (value) => {
@@ -20,13 +28,27 @@ function useDocumentHandle({
         return result;
       };
     };
-    const fetchQuery = (args) => observer.send({
-      ...args,
-      session
-    });
+    const fetchQuery = (args) => {
+      const usedVariables = Object.fromEntries(
+        Object.keys(observer.artifact.input?.fields ?? {}).map((fieldName) => [
+          fieldName,
+          location.params[fieldName]
+        ])
+      );
+      return observer.send({
+        ...args,
+        variables: {
+          ...usedVariables,
+          ...args?.variables
+        },
+        session
+      });
+    };
     if (artifact.kind !== ArtifactKind.Query || !artifact.refetch?.paginated) {
       return {
+        artifact,
         data: storeValue.data,
+        variables: storeValue.variables,
         fetch: fetchQuery,
         partial: storeValue.partial
       };
@@ -38,12 +60,12 @@ function useDocumentHandle({
         getVariables: () => storeValue.variables,
         fetch: fetchQuery,
         fetchUpdate: (args, updates) => {
-          return observer.send({
+          return paginationObserver.send({
             ...args,
             cacheParams: {
+              ...args?.cacheParams,
               disableSubscriptions: true,
-              applyUpdates: updates,
-              ...args?.cacheParams
+              applyUpdates: updates
             },
             session
           });
@@ -51,7 +73,9 @@ function useDocumentHandle({
         getSession: async () => session
       });
       return {
+        artifact,
         data: storeValue.data,
+        variables: storeValue.variables,
         fetch: handlers.fetch,
         partial: storeValue.partial,
         loadNext: wrapLoad(setForwardPending, handlers.loadNextPage),
@@ -69,7 +93,7 @@ function useDocumentHandle({
         storeName: artifact.name,
         fetch: fetchQuery,
         fetchUpdate: async (args, updates = ["append"]) => {
-          return observer.send({
+          return paginationObserver.send({
             ...args,
             cacheParams: {
               disableSubscriptions: true,
@@ -81,7 +105,9 @@ function useDocumentHandle({
         getSession: async () => session
       });
       return {
+        artifact,
         data: storeValue.data,
+        variables: storeValue.variables,
         fetch: handlers.fetch,
         partial: storeValue.partial,
         loadNext: wrapLoad(setForwardPending, handlers.loadNextPage),
@@ -89,12 +115,14 @@ function useDocumentHandle({
       };
     }
     return {
+      artifact,
       data: storeValue.data,
+      variables: storeValue.variables,
       fetch: fetchQuery,
       refetch: fetchQuery,
       partial: storeValue.partial
     };
-  }, [artifact, observer, session, storeValue, true, true]);
+  }, [artifact, observer, session, storeValue]);
 }
 export {
   useDocumentHandle

package/build/runtime-esm/routing/Router.d.ts

@@ -5,6 +5,7 @@ import { GraphQLObject, GraphQLVariables } from '$houdini/runtime/lib/types';
 import { QueryArtifact } from '$houdini/runtime/lib/types';
 import type { RouterManifest } from '$houdini/runtime/router/types';
 import React from 'react';
+import { DocumentHandle } from '../hooks/useDocumentHandle';
 import { SuspenseCache } from './cache';
 type ComponentType = any;
 /**
@@ -21,6 +22,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 export declare const useLocation: () => {
     pathname: string;
     params: Record<string, any>;
+    goto: (url: string) => void;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;
@@ -54,7 +56,7 @@ export declare function useCache(): Cache;
 export declare function updateLocalSession(session: App.Session): void;
 export declare function useSession(): [App.Session, (newSession: Partial<App.Session>) => void];
 export declare function useCurrentVariables(): GraphQLVariables;
-export declare function useQueryResult<_Data extends GraphQLObject, _Input extends GraphQLVariables>(name: string): [_Data | null, DocumentStore<_Data, _Input>];
+export declare function useQueryResult<_Data extends GraphQLObject, _Input extends GraphQLVariables>(name: string): [_Data | null, DocumentHandle<any, _Data, _Input>];
 export type RouterCache = {
     artifact_cache: SuspenseCache<QueryArtifact>;
     component_cache: SuspenseCache<(props: any) => React.ReactElement>;

package/build/runtime-esm/routing/Router.js

@@ -5,6 +5,7 @@ import { marshalSelection, marshalInputs } from "$houdini/runtime/lib/scalars";
 import { find_match } from "$houdini/runtime/router/match";
 import React from "react";
 import { useContext } from "react";
+import { useDocumentHandle } from "../hooks/useDocumentHandle";
 import { useDocumentStore } from "../hooks/useDocumentStore";
 import { suspense_cache } from "./cache";
 const PreloadWhich = {
@@ -21,7 +22,7 @@ function Router({
   const [currentURL, setCurrentURL] = React.useState(() => {
     return initialURL || window.location.pathname;
   });
-  const [page, variables] = find_match(manifest, currentURL);
+  const [page, variables] = find_match(configFile, manifest, currentURL);
   if (!page) {
     throw new Error("404");
   }
@@ -31,7 +32,7 @@ function Router({
     assetPrefix,
     injectToStream
   });
-  const { component_cache } = useRouterContext();
+  const { component_cache, data_cache } = useRouterContext();
   const PageComponent = component_cache.get(page.id);
   React.useEffect(() => {
     if (globalThis.window && window.location.pathname !== currentURL) {
@@ -50,21 +51,36 @@ function Router({
       window.removeEventListener("popstate", onChange);
     };
   }, []);
+  const goto = (url) => {
+    data_cache.clear();
+    setCurrentURL(url);
+  };
   useLinkBehavior({
-    goto: (val) => {
-      setCurrentURL(val);
-    },
+    goto,
     preload(url, which) {
-      const [page2, variables2] = find_match(manifest, url);
-      if (["both", "component"].includes(which)) {
+      const [page2, variables2] = find_match(configFile, manifest, url);
+      if (!page2) {
+        return;
+      }
+      if (["page", "component"].includes(which)) {
         loadComponent(page2);
       }
-      if (["both", "data"].includes(which)) {
+      if (["page", "data"].includes(which)) {
         loadData(page2, variables2);
       }
     }
   });
-  return /* @__PURE__ */ jsx(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ jsx(LocationContext.Provider, { value: { pathname: currentURL, params: variables ?? {} }, children: /* @__PURE__ */ jsx(PageComponent, { url: currentURL }, page.id) }) });
+  return /* @__PURE__ */ jsx(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ jsx(
+    LocationContext.Provider,
+    {
+      value: {
+        pathname: currentURL,
+        goto,
+        params: variables ?? {}
+      },
+      children: /* @__PURE__ */ jsx(PageComponent, { url: currentURL }, page.id)
+    }
+  ) });
 }
 const useLocation = () => useContext(LocationContext);
 function usePageData({
@@ -83,9 +99,13 @@ function usePageData({
     last_variables
   } = useRouterContext();
   const [session] = useSession();
-  function load_query({ id, artifact }) {
+  function load_query({
+    id,
+    artifact,
+    variables: variables2
+  }) {
     for (const artifact2 of Object.keys(page.documents)) {
-      last_variables.set(artifact2, variables);
+      last_variables.set(artifact2, variables2);
     }
     if (ssr_signals.has(id)) {
       return ssr_signals.get(id);
@@ -99,8 +119,7 @@ function usePageData({
       resolve = res;
       reject = rej;
       observer.send({
-        variables,
-        cacheParams: { disableSubscriptions: true },
+        variables: variables2,
         session
       }).then(async () => {
         data_cache.set(id, observer);
@@ -136,13 +155,14 @@ function usePageData({
 										variables: ${JSON.stringify(
           marshalInputs({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: configFile
           })
         )}
+									}).then(() => {
+										window.__houdini__nav_caches__?.data_cache.set(artifactName, new_store)
 									})
 
-									window.__houdini__nav_caches__?.data_cache.set(artifactName, new_store)
 								}
 
 
@@ -176,7 +196,7 @@ function usePageData({
 											variables: ${JSON.stringify(
           marshalInputs({
             artifact: observer.artifact,
-            input: variables,
+            input: variables2,
             config: configFile
           })
         )}
@@ -201,6 +221,9 @@ function usePageData({
     return resolvable;
   }
   function loadData(targetPage, variables2) {
+    if (!targetPage) {
+      return;
+    }
     for (const [artifact, { variables: pageVariables }] of Object.entries(
       targetPage.documents
     )) {
@@ -233,14 +256,14 @@ function usePageData({
         injectToStream?.(`
 						<script type="module" src="${assetPrefix}/artifacts/${artifact.name}.js" async=""><\/script>
 					`);
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }).catch((err) => {
         console.log(err);
       });
     }
     for (const artifact of Object.values(found_artifacts)) {
       if (!data_cache.has(artifact.name)) {
-        load_query({ id: artifact.name, artifact });
+        load_query({ id: artifact.name, artifact, variables: variables2 });
       }
     }
   }
@@ -348,18 +371,27 @@ function useCurrentVariables() {
 const VariableContext = React.createContext(null);
 const LocationContext = React.createContext({
   pathname: "",
-  params: {}
+  params: {},
+  goto: () => {
+  }
 });
 function useQueryResult(name) {
-  const store_ref = useRouterContext().data_cache.get(name);
-  const [{ data, errors }, observer] = useDocumentStore({
+  const { data_cache, artifact_cache } = useRouterContext();
+  const store_ref = data_cache.get(name);
+  const [storeValue, observer] = useDocumentStore({
     artifact: store_ref.artifact,
     observer: store_ref
   });
+  const { data, errors } = storeValue;
   if (errors && errors.length > 0) {
     throw new Error(JSON.stringify(errors));
   }
-  return [data, observer];
+  const handle = useDocumentHandle({
+    artifact: artifact_cache.get(name),
+    observer,
+    storeValue
+  });
+  return [data, handle];
 }
 function useLinkBehavior({
   goto,
@@ -402,10 +434,14 @@ function usePreload({ preload }) {
   React.useEffect(() => {
     const mouseMove = (e) => {
       const target = e.target;
-      if (!(target instanceof HTMLAnchorElement)) {
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      const anchor = target.closest("a");
+      if (!anchor) {
         return;
       }
-      let preloadWhichRaw = target.attributes.getNamedItem("data-houdini-preload")?.value;
+      let preloadWhichRaw = anchor.attributes.getNamedItem("data-houdini-preload")?.value;
       let preloadWhich = !preloadWhichRaw || preloadWhichRaw === "true" ? "page" : preloadWhichRaw;
       if (!PreloadWhich[preloadWhich]) {
         console.log(
@@ -417,7 +453,7 @@ function usePreload({ preload }) {
         clearTimeout(timeoutRef.current);
       }
       timeoutRef.current = setTimeout(() => {
-        const url = target.attributes.getNamedItem("href")?.value;
+        const url = anchor.attributes.getNamedItem("href")?.value;
         if (!url) {
           return;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "1.2.45",
+  "version": "1.2.47",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -37,13 +37,13 @@
     "express": "^4.18.2",
     "graphql": "^15.8.0",
     "graphql-yoga": "^4.0.4",
-    "react": "18.3.0-canary-09fbee89d-20231013",
-    "react-dom": "18.3.0-canary-09fbee89d-20231013",
+    "react": "19.0.0-canary-2b036d3f1-20240327",
+    "react-dom": "19.0.0-canary-2b036d3f1-20240327",
     "react-streaming-compat": "^0.3.18",
     "recast": "^0.23.1",
     "rollup": "^3.7.4",
     "use-deep-compare-effect": "^1.8.1",
-    "houdini": "^1.2.45"
+    "houdini": "^1.2.47"
   },
   "files": [
     "build"