houdini-react 1.2.44 → 1.2.45

package/build/runtime/index.d.ts

@@ -2,7 +2,7 @@ import type { GraphQLObject } from '$houdini/lib/types';
 import type { Cache } from '$houdini/runtime/cache/cache';
 import { RouterCache } from './routing';
 export * from './hooks';
-export { router_cache, useSession, useLocation } from './routing';
+export { router_cache, useSession, useLocation, useRoute } from './routing';
 export declare function Router({ cache, initialURL, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session, assetPrefix, injectToStream, }: {
     initialURL: string;
     initialVariables: GraphQLObject;

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

@@ -20,6 +20,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 }): JSX.Element;
 export declare const useLocation: () => {
     pathname: string;
+    params: Record<string, any>;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;
@@ -69,4 +70,14 @@ export declare function router_cache({ pending_queries, artifacts, components, i
     initialVariables?: Record<string, GraphQLVariables>;
     initialArtifacts?: Record<string, QueryArtifact>;
 }): RouterCache;
+export declare function PageContextProvider({ keys, children, }: {
+    keys: string[];
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function useRoute<PageProps extends {
+    Params: {};
+}>(): RouteProp<PageProps['Params']>;
+export type RouteProp<Params> = {
+    params: Params;
+};
 export {};

package/build/runtime-cjs/index.d.ts

@@ -2,7 +2,7 @@ import type { GraphQLObject } from '$houdini/lib/types';
 import type { Cache } from '$houdini/runtime/cache/cache';
 import { RouterCache } from './routing';
 export * from './hooks';
-export { router_cache, useSession, useLocation } from './routing';
+export { router_cache, useSession, useLocation, useRoute } from './routing';
 export declare function Router({ cache, initialURL, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session, assetPrefix, injectToStream, }: {
     initialURL: string;
     initialVariables: GraphQLObject;

package/build/runtime-cjs/index.js

@@ -28,6 +28,7 @@ __export(runtime_exports, {
   Router: () => Router,
   router_cache: () => import_routing2.router_cache,
   useLocation: () => import_routing2.useLocation,
+  useRoute: () => import_routing2.useRoute,
   useSession: () => import_routing2.useSession
 });
 module.exports = __toCommonJS(runtime_exports);
@@ -77,5 +78,6 @@ function Router({
   Router,
   router_cache,
   useLocation,
+  useRoute,
   useSession
 });

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

@@ -20,6 +20,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 }): JSX.Element;
 export declare const useLocation: () => {
     pathname: string;
+    params: Record<string, any>;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;
@@ -69,4 +70,14 @@ export declare function router_cache({ pending_queries, artifacts, components, i
     initialVariables?: Record<string, GraphQLVariables>;
     initialArtifacts?: Record<string, QueryArtifact>;
 }): RouterCache;
+export declare function PageContextProvider({ keys, children, }: {
+    keys: string[];
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function useRoute<PageProps extends {
+    Params: {};
+}>(): RouteProp<PageProps['Params']>;
+export type RouteProp<Params> = {
+    params: Params;
+};
 export {};

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

@@ -24,6 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Router_exports = {};
 __export(Router_exports, {
+  PageContextProvider: () => PageContextProvider,
   Router: () => Router,
   RouterContextProvider: () => RouterContextProvider,
   router_cache: () => router_cache,
@@ -33,6 +34,7 @@ __export(Router_exports, {
   useCurrentVariables: () => useCurrentVariables,
   useLocation: () => useLocation,
   useQueryResult: () => useQueryResult,
+  useRoute: () => useRoute,
   useRouterContext: () => useRouterContext,
   useSession: () => useSession
 });
@@ -40,6 +42,7 @@ module.exports = __toCommonJS(Router_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_config = __toESM(require("$houdini/runtime/imports/config"));
 var import_deepEquals = require("$houdini/runtime/lib/deepEquals");
+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");
@@ -60,6 +63,9 @@ function Router({
     return initialURL || window.location.pathname;
   });
   const [page, variables] = (0, import_match.find_match)(manifest, currentURL);
+  if (!page) {
+    throw new Error("404");
+  }
   const { loadData, loadComponent } = usePageData({
     page,
     variables,
@@ -99,7 +105,7 @@ function Router({
       }
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LocationContext.Provider, { value: { pathname: currentURL }, 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, params: variables ?? {} }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageComponent, { url: currentURL }, page.id) }) });
 }
 const useLocation = () => (0, import_react2.useContext)(LocationContext);
 function usePageData({
@@ -137,7 +143,7 @@ function usePageData({
         variables,
         cacheParams: { disableSubscriptions: true },
         session
-      }).then(() => {
+      }).then(async () => {
         data_cache.set(id, observer);
         if (observer.state.errors && observer.state.errors.length > 0) {
           reject(observer.state.errors.map((e) => e.message).join("\n"));
@@ -149,7 +155,12 @@ function usePageData({
 								window.__houdini__cache__?.hydrate(${cache.serialize()}, window.__houdini__hydration__layer)
 
 								const artifactName = "${artifact.name}"
-								const value = ${JSON.stringify(observer.state.data)}
+								const value = ${JSON.stringify(
+          await (0, import_scalars.marshalSelection)({
+            selection: observer.artifact.selection,
+            data: observer.state.data
+          })
+        )}
 
 								// if the data is pending, we need to resolve it
 								if (window.__houdini__nav_caches__?.data_cache.has(artifactName)) {
@@ -158,7 +169,18 @@ function usePageData({
 									const new_store = window.__houdini__client__.observe({
 										artifact: window.__houdini__nav_caches__.artifact_cache.get(artifactName),
 										cache: window.__houdini__cache__,
-										initialValue: value,
+									})
+
+									// we're pushing this store onto the client, it should be initialized
+									window.__houdini__nav_caches__.data_cache.get(artifactName).send({
+										setup: true,
+										variables: ${JSON.stringify(
+          (0, import_scalars.marshalInputs)({
+            artifact: observer.artifact,
+            input: variables,
+            config: import_config.default
+          })
+        )}
 									})
 
 									window.__houdini__nav_caches__?.data_cache.set(artifactName, new_store)
@@ -178,12 +200,12 @@ function usePageData({
 									if (!window.__houdini__pending_artifacts__) {
 										window.__houdini__pending_artifacts__ = {}
 									}
-
-									window.__houdini__pending_variables__[artifactName] = ${JSON.stringify(variables)}
-									window.__houdini__pending_data__[artifactName] = value
-									window.__houdini__pending_artifacts__[artifactName] = ${JSON.stringify(artifact)}
 								}
 
+								window.__houdini__pending_variables__[artifactName] = ${JSON.stringify(observer.state.variables)}
+								window.__houdini__pending_data__[artifactName] = value
+								window.__houdini__pending_artifacts__[artifactName] = ${JSON.stringify(artifact)}
+
 								// if this payload finishes off an ssr request, we need to resolve the signal
 								if (window.__houdini__nav_caches__?.ssr_signals.has(artifactName)) {
 
@@ -192,7 +214,13 @@ function usePageData({
 										// we're pushing this store onto the client, it should be initialized
 										window.__houdini__nav_caches__.data_cache.get(artifactName).send({
 											setup: true,
-											variables: ${JSON.stringify(variables)}
+											variables: ${JSON.stringify(
+          (0, import_scalars.marshalInputs)({
+            artifact: observer.artifact,
+            input: variables,
+            config: import_config.default
+          })
+        )}
 										})
 									}
 
@@ -222,7 +250,7 @@ function usePageData({
       }
       let last = {};
       let usedVariables = {};
-      for (const variable of pageVariables) {
+      for (const variable of Object.keys(pageVariables)) {
         last[variable] = last_variables.get(artifact)[variable];
         usedVariables[variable] = (variables2 ?? {})[variable];
       }
@@ -348,7 +376,8 @@ function useSession() {
       method: "POST",
       body: JSON.stringify(newSession),
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        Accept: "application/json"
       }
     });
   };
@@ -358,7 +387,10 @@ function useCurrentVariables() {
   return import_react.default.useContext(VariableContext);
 }
 const VariableContext = import_react.default.createContext(null);
-const LocationContext = import_react.default.createContext({ pathname: "" });
+const LocationContext = import_react.default.createContext({
+  pathname: "",
+  params: {}
+});
 function useQueryResult(name) {
   const store_ref = useRouterContext().data_cache.get(name);
   const [{ data, errors }, observer] = (0, import_useDocumentStore.useDocumentStore)({
@@ -468,6 +500,20 @@ function router_cache({
   }
   return result;
 }
+const PageContext = import_react.default.createContext({ params: {} });
+function PageContextProvider({
+  keys,
+  children
+}) {
+  const location2 = useLocation();
+  const params = Object.fromEntries(
+    Object.entries(location2.params).filter(([key]) => keys.includes(key))
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageContext.Provider, { value: { params }, children });
+}
+function useRoute() {
+  return (0, import_react2.useContext)(PageContext);
+}
 function signal_promise() {
   let resolve = () => {
   };
@@ -485,6 +531,7 @@ function signal_promise() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PageContextProvider,
   Router,
   RouterContextProvider,
   router_cache,
@@ -494,6 +541,7 @@ function signal_promise() {
   useCurrentVariables,
   useLocation,
   useQueryResult,
+  useRoute,
   useRouterContext,
   useSession
 });

package/build/runtime-esm/index.d.ts

@@ -2,7 +2,7 @@ import type { GraphQLObject } from '$houdini/lib/types';
 import type { Cache } from '$houdini/runtime/cache/cache';
 import { RouterCache } from './routing';
 export * from './hooks';
-export { router_cache, useSession, useLocation } from './routing';
+export { router_cache, useSession, useLocation, useRoute } from './routing';
 export declare function Router({ cache, initialURL, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session, assetPrefix, injectToStream, }: {
     initialURL: string;
     initialVariables: GraphQLObject;

package/build/runtime-esm/index.js

@@ -3,7 +3,7 @@ import client from "./client";
 import manifest from "./manifest";
 import { Router as RouterImpl, RouterContextProvider } from "./routing";
 export * from "./hooks";
-import { router_cache, useSession, useLocation } from "./routing";
+import { router_cache, useSession, useLocation, useRoute } from "./routing";
 function Router({
   cache,
   initialURL,
@@ -43,5 +43,6 @@ export {
   Router,
   router_cache,
   useLocation,
+  useRoute,
   useSession
 };

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

@@ -20,6 +20,7 @@ export declare function Router({ manifest, initialURL, assetPrefix, injectToStre
 }): JSX.Element;
 export declare const useLocation: () => {
     pathname: string;
+    params: Record<string, any>;
 };
 export declare function RouterContextProvider({ children, client, cache, artifact_cache, component_cache, data_cache, ssr_signals, last_variables, session: ssrSession, }: {
     children: React.ReactElement;
@@ -69,4 +70,14 @@ export declare function router_cache({ pending_queries, artifacts, components, i
     initialVariables?: Record<string, GraphQLVariables>;
     initialArtifacts?: Record<string, QueryArtifact>;
 }): RouterCache;
+export declare function PageContextProvider({ keys, children, }: {
+    keys: string[];
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function useRoute<PageProps extends {
+    Params: {};
+}>(): RouteProp<PageProps['Params']>;
+export type RouteProp<Params> = {
+    params: Params;
+};
 export {};

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import configFile from "$houdini/runtime/imports/config";
 import { deepEquals } from "$houdini/runtime/lib/deepEquals";
+import { marshalSelection, marshalInputs } from "$houdini/runtime/lib/scalars";
 import { find_match } from "$houdini/runtime/router/match";
 import React from "react";
 import { useContext } from "react";
@@ -21,6 +22,9 @@ function Router({
     return initialURL || window.location.pathname;
   });
   const [page, variables] = find_match(manifest, currentURL);
+  if (!page) {
+    throw new Error("404");
+  }
   const { loadData, loadComponent } = usePageData({
     page,
     variables,
@@ -60,7 +64,7 @@ function Router({
       }
     }
   });
-  return /* @__PURE__ */ jsx(VariableContext.Provider, { value: variables, children: /* @__PURE__ */ jsx(LocationContext.Provider, { value: { pathname: currentURL }, children: /* @__PURE__ */ jsx(PageComponent, { url: currentURL }, page.id) }) });
+  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) }) });
 }
 const useLocation = () => useContext(LocationContext);
 function usePageData({
@@ -98,7 +102,7 @@ function usePageData({
         variables,
         cacheParams: { disableSubscriptions: true },
         session
-      }).then(() => {
+      }).then(async () => {
         data_cache.set(id, observer);
         if (observer.state.errors && observer.state.errors.length > 0) {
           reject(observer.state.errors.map((e) => e.message).join("\n"));
@@ -110,7 +114,12 @@ function usePageData({
 								window.__houdini__cache__?.hydrate(${cache.serialize()}, window.__houdini__hydration__layer)
 
 								const artifactName = "${artifact.name}"
-								const value = ${JSON.stringify(observer.state.data)}
+								const value = ${JSON.stringify(
+          await marshalSelection({
+            selection: observer.artifact.selection,
+            data: observer.state.data
+          })
+        )}
 
 								// if the data is pending, we need to resolve it
 								if (window.__houdini__nav_caches__?.data_cache.has(artifactName)) {
@@ -119,7 +128,18 @@ function usePageData({
 									const new_store = window.__houdini__client__.observe({
 										artifact: window.__houdini__nav_caches__.artifact_cache.get(artifactName),
 										cache: window.__houdini__cache__,
-										initialValue: value,
+									})
+
+									// we're pushing this store onto the client, it should be initialized
+									window.__houdini__nav_caches__.data_cache.get(artifactName).send({
+										setup: true,
+										variables: ${JSON.stringify(
+          marshalInputs({
+            artifact: observer.artifact,
+            input: variables,
+            config: configFile
+          })
+        )}
 									})
 
 									window.__houdini__nav_caches__?.data_cache.set(artifactName, new_store)
@@ -139,12 +159,12 @@ function usePageData({
 									if (!window.__houdini__pending_artifacts__) {
 										window.__houdini__pending_artifacts__ = {}
 									}
-
-									window.__houdini__pending_variables__[artifactName] = ${JSON.stringify(variables)}
-									window.__houdini__pending_data__[artifactName] = value
-									window.__houdini__pending_artifacts__[artifactName] = ${JSON.stringify(artifact)}
 								}
 
+								window.__houdini__pending_variables__[artifactName] = ${JSON.stringify(observer.state.variables)}
+								window.__houdini__pending_data__[artifactName] = value
+								window.__houdini__pending_artifacts__[artifactName] = ${JSON.stringify(artifact)}
+
 								// if this payload finishes off an ssr request, we need to resolve the signal
 								if (window.__houdini__nav_caches__?.ssr_signals.has(artifactName)) {
 
@@ -153,7 +173,13 @@ function usePageData({
 										// we're pushing this store onto the client, it should be initialized
 										window.__houdini__nav_caches__.data_cache.get(artifactName).send({
 											setup: true,
-											variables: ${JSON.stringify(variables)}
+											variables: ${JSON.stringify(
+          marshalInputs({
+            artifact: observer.artifact,
+            input: variables,
+            config: configFile
+          })
+        )}
 										})
 									}
 
@@ -183,7 +209,7 @@ function usePageData({
       }
       let last = {};
       let usedVariables = {};
-      for (const variable of pageVariables) {
+      for (const variable of Object.keys(pageVariables)) {
         last[variable] = last_variables.get(artifact)[variable];
         usedVariables[variable] = (variables2 ?? {})[variable];
       }
@@ -309,7 +335,8 @@ function useSession() {
       method: "POST",
       body: JSON.stringify(newSession),
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        Accept: "application/json"
       }
     });
   };
@@ -319,7 +346,10 @@ function useCurrentVariables() {
   return React.useContext(VariableContext);
 }
 const VariableContext = React.createContext(null);
-const LocationContext = React.createContext({ pathname: "" });
+const LocationContext = React.createContext({
+  pathname: "",
+  params: {}
+});
 function useQueryResult(name) {
   const store_ref = useRouterContext().data_cache.get(name);
   const [{ data, errors }, observer] = useDocumentStore({
@@ -429,6 +459,20 @@ function router_cache({
   }
   return result;
 }
+const PageContext = React.createContext({ params: {} });
+function PageContextProvider({
+  keys,
+  children
+}) {
+  const location2 = useLocation();
+  const params = Object.fromEntries(
+    Object.entries(location2.params).filter(([key]) => keys.includes(key))
+  );
+  return /* @__PURE__ */ jsx(PageContext.Provider, { value: { params }, children });
+}
+function useRoute() {
+  return useContext(PageContext);
+}
 function signal_promise() {
   let resolve = () => {
   };
@@ -445,6 +489,7 @@ function signal_promise() {
   };
 }
 export {
+  PageContextProvider,
   Router,
   RouterContextProvider,
   router_cache,
@@ -454,6 +499,7 @@ export {
   useCurrentVariables,
   useLocation,
   useQueryResult,
+  useRoute,
   useRouterContext,
   useSession
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "houdini-react",
-  "version": "1.2.44",
+  "version": "1.2.45",
   "description": "The React plugin for houdini",
   "keywords": [
     "typescript",
@@ -43,7 +43,7 @@
     "recast": "^0.23.1",
     "rollup": "^3.7.4",
     "use-deep-compare-effect": "^1.8.1",
-    "houdini": "^1.2.44"
+    "houdini": "^1.2.45"
   },
   "files": [
     "build"