Don't run setup on queries without load (#1068)

.changeset/twelve-ravens-shout.md

@@ -0,0 +1,5 @@
+---
+'houdini-svelte': patch
+---
+
+Fix bug with lazy component queries causing them to subscribe to the cache before fetching

e2e/kit/src/lib/utils/routes.ts

@@ -40,6 +40,7 @@ export const routes = {
   Stores_Session: '/stores/session',
   Stores_Comp_disable_auto_fetch: '/stores/comp_disable_auto_fetch',
   Stores_Comp_init: '/stores/component_init',
+  Stores_Component_no_load_no_setup: '/stores/component_no_load_no_setup',
 
   Stores_Partial_List: '/stores/partial/partial_List',
   Stores_Partial_Off: '/stores/partial-off',

e2e/kit/src/routes/stores/component_no_load_no_setup/+page.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { graphql } from '$houdini';
+
+  const q1 = graphql(`
+    query q1 @load {
+      cities {
+        name
+      }
+    }
+  `);
+
+  const q2 = graphql(`
+    query q2 {
+      city(id: 1) {
+        name
+      }
+    }
+  `);
+
+  const q3 = graphql(`
+    query q3 {
+      city(id: 1) {
+        name
+      }
+    }
+  `);
+</script>
+
+<div>
+  <h3>query 1</h3>
+  <pre>
+    {JSON.stringify($q1.data, null, 2)}
+  </pre>
+</div>
+
+<div>
+  <h3>query 2</h3>
+  <pre>
+    {JSON.stringify($q2.data, null, 2)}
+  </pre>
+  <button id="load2" on:click={() => q2.fetch()}>Run</button>
+</div>
+
+<h3>query 3</h3>
+<div id="result">
+  {JSON.stringify($q3.data, null, 2)}
+</div>
+<button on:click={() => q3.fetch()}>Run</button>

e2e/kit/src/routes/stores/component_no_load_no_setup/spec.ts

@@ -0,0 +1,18 @@
+import { test } from '@playwright/test';
+import { routes } from '../../../lib/utils/routes.js';
+import { expect_to_be, goto } from '../../../lib/utils/testsHelper.js';
+import { sleep } from '@kitql/helper';
+
+test("Components without load shouldn't subscribe to the cache", async ({ page }) => {
+  await goto(page, routes.Stores_Component_no_load_no_setup);
+
+  await expect_to_be(page, 'null');
+
+  // click on the button
+  await page.click('#load2');
+
+  await sleep(100);
+
+  // make sure we still have null as the value
+  await expect_to_be(page, 'null');
+});

packages/houdini-svelte/src/plugin/artifactData.test.ts

@@ -176,7 +176,6 @@ describe('blocking', () => {
 
 			    "pluginData": {
 			        "test": {
-			            "isManualLoad": true,
 			            "set_blocking": true
 			        }
 			    },
@@ -221,7 +220,6 @@ describe('blocking', () => {
 
 			    "pluginData": {
 			        "test": {
-			            "isManualLoad": true,
 			            "set_blocking": false
 			        }
 			    },

packages/houdini-svelte/src/plugin/artifactData.ts

@@ -13,8 +13,8 @@ export function artifactData({
 	config: Config
 	document: Document
 }): PluginArtifactData {
-	// put together the type information for the filter for every list
-	let isManualLoad = true
+	// only documents in svelte files require opting into a load
+	let isManualLoad = document.filename.endsWith('.svelte')
 	let set_blocking: boolean | undefined = undefined
 
 	graphql.visit(document.document, {

packages/houdini-svelte/src/runtime/stores/base.ts

@@ -17,7 +17,7 @@ export class BaseStore<
 	_Artifact extends DocumentArtifact = DocumentArtifact
 > {
 	// the underlying data
-	#params: ObserveParams<_Data, _Artifact>
+	#params: ObserveParams<_Data, _Artifact> & { initialize?: boolean }
 	get artifact() {
 		return this.#params.artifact
 	}
@@ -31,7 +31,7 @@ export class BaseStore<
 	#store: DocumentStore<_Data, _Input>
 	#unsubscribe: (() => void) | null = null
 
-	constructor(params: ObserveParams<_Data, _Artifact>) {
+	constructor(params: ObserveParams<_Data, _Artifact> & { initialize?: boolean }) {
 		// we pass null here so that the store is a zombie - we will never
 		// send a request until the client has loaded
 		this.#store = new DocumentStore({
@@ -116,7 +116,7 @@ export class BaseStore<
 			})
 
 			// only initialize when told to
-			if (init) {
+			if (init && this.#params.initialize) {
 				return this.observer.send({
 					setup: true,
 					variables: get(this.observer).variables,

packages/houdini-svelte/src/runtime/stores/query.ts

@@ -47,7 +47,12 @@ export class QueryStore<
 		// except for manual queries, which should be false, it will be manualy triggered
 		const fetching = artifact.pluginData['houdini-svelte']?.isManualLoad !== true
 
-		super({ artifact, fetching })
+		super({
+			artifact,
+			fetching,
+			// only initialize the store if it was automatically loaded
+			initialize: !artifact.pluginData['houdini-svelte'].isManualLoad,
+		})
 
 		this.storeName = storeName
 		this.variables = variables