fix variable change detection

packages/houdini-react/src/plugin/vite.tsx

@@ -202,6 +202,7 @@ export default {
 
 				// if there is pending data (or artifacts) then we should prime the caches
 				let initialData = {}
+				let initialVariables = {}
 				let initialArtifacts = {}
 
 				// hydrate the client with the component cache
@@ -244,6 +245,7 @@ export default {
 
 						// save it in the cache
 						initialData[artifactName] = observer
+						initialVariables[artifactName] = variables
 					}
 
 				}
@@ -253,6 +255,7 @@ export default {
 					window.__houdini__nav_caches__ = router_cache({
 						pending_queries: ${JSON.stringify(queries)},
 						initialData,
+						initialVariables: window.__houdini__pending_variables__,
 						initialArtifacts,
 						components: {
 							'${id}': Component

packages/houdini-react/src/runtime/index.tsx

@@ -1,3 +1,4 @@
+import type { GraphQLObject } from '$houdini/lib/types'
 import type { Cache } from '$houdini/runtime/cache/cache'
 
 import client from './client'
@@ -20,6 +21,7 @@ export function Router({
 	injectToStream,
 }: {
 	initialURL: string
+	initialVariables: GraphQLObject
 	cache: Cache
 	session?: App.Session
 	assetPrefix: string

packages/houdini-react/src/runtime/routing/Router.tsx

@@ -161,9 +161,11 @@ function usePageData({
 
 	// the function to load a query using the cache references
 	function load_query({ id, artifact }: { id: string; artifact: QueryArtifact }): Promise<void> {
+		// TODO: better tracking - only register the variables that were used
 		// track the new variables
-		last_variables.set(page.id, variables)
-		console.log('registering variables', page.id, variables)
+		for (const artifact of Object.keys(page.documents)) {
+			last_variables.set(artifact, variables)
+		}
 
 		// TODO: AbortController on send()
 		// TODO: we can read from cache here before making an asynchronous network call
@@ -273,12 +275,14 @@ function usePageData({
 
 	// the function that loads all of the data for a page using the caches
 	function loadData(targetPage: RouterPageManifest<ComponentType>, variables: {} | null) {
-		// if the variables have changed then we need to clear the data store (so we fetch again)
-		if (
-			last_variables.has(targetPage.id) &&
-			!deepEquals(last_variables.get(targetPage.id), variables)
-		) {
-			data_cache.clear()
+		// if any of the artifacts that this page on have new variables, we need to clear the data cache
+		for (const artifact of Object.keys(targetPage.documents)) {
+			if (
+				last_variables.has(artifact) &&
+				!deepEquals(last_variables.get(artifact), variables)
+			) {
+				data_cache.delete(artifact)
+			}
 		}
 
 		// in order to avoid waterfalls, we need to kick off APIs requests in parallel
@@ -645,12 +649,14 @@ export function router_cache({
 	artifacts = {},
 	components = {},
 	initialData = {},
+	initialVariables = {},
 	initialArtifacts = {},
 }: {
 	pending_queries?: string[]
 	artifacts?: Record<string, QueryArtifact>
 	components?: Record<string, (props: any) => React.ReactElement>
 	initialData?: Record<string, DocumentStore<GraphQLObject, GraphQLVariables>>
+	initialVariables?: Record<string, GraphQLVariables>
 	initialArtifacts?: Record<string, QueryArtifact>
 } = {}): RouterCache {
 	const result: RouterCache = {
@@ -674,6 +680,10 @@ export function router_cache({
 		result.component_cache.set(name, component)
 	}
 
+	for (const [name, variables] of Object.entries(initialVariables)) {
+		result.last_variables.set(name, variables)
+	}
+
 	return result
 }