From 7e30f68c3de705ee44c98d194ccfca1110b549e9 Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Sat, 22 Apr 2023 00:12:13 -0700 Subject: [PATCH] Don't run setup on queries without load (#1068) --- .changeset/twelve-ravens-shout.md | 5 ++ e2e/kit/src/lib/utils/routes.ts | 1 + .../component_no_load_no_setup/+page.svelte | 48 +++++++++++++++++++ .../stores/component_no_load_no_setup/spec.ts | 18 +++++++ .../src/plugin/artifactData.test.ts | 2 - .../houdini-svelte/src/plugin/artifactData.ts | 4 +- .../houdini-svelte/src/runtime/stores/base.ts | 6 +-- .../src/runtime/stores/query.ts | 7 ++- 8 files changed, 83 insertions(+), 8 deletions(-) create mode 100644 .changeset/twelve-ravens-shout.md create mode 100644 e2e/kit/src/routes/stores/component_no_load_no_setup/+page.svelte create mode 100644 e2e/kit/src/routes/stores/component_no_load_no_setup/spec.ts diff --git a/.changeset/twelve-ravens-shout.md b/.changeset/twelve-ravens-shout.md new file mode 100644 index 000000000..fef639856 --- /dev/null +++ b/.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 diff --git a/e2e/kit/src/lib/utils/routes.ts b/e2e/kit/src/lib/utils/routes.ts index a1637effe..a60223da4 100644 --- a/e2e/kit/src/lib/utils/routes.ts +++ b/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', diff --git a/e2e/kit/src/routes/stores/component_no_load_no_setup/+page.svelte b/e2e/kit/src/routes/stores/component_no_load_no_setup/+page.svelte new file mode 100644 index 000000000..e32ede176 --- /dev/null +++ b/e2e/kit/src/routes/stores/component_no_load_no_setup/+page.svelte @@ -0,0 +1,48 @@ + + +
+

query 1

+ 
+    {JSON.stringify($q1.data, null, 2)}
+
+
+ +
+

query 2

+ 
+    {JSON.stringify($q2.data, null, 2)}
+
+ +
+ +

query 3

+
+ {JSON.stringify($q3.data, null, 2)} +
+ diff --git a/e2e/kit/src/routes/stores/component_no_load_no_setup/spec.ts b/e2e/kit/src/routes/stores/component_no_load_no_setup/spec.ts new file mode 100644 index 000000000..ac8a2372d --- /dev/null +++ b/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'); +}); diff --git a/packages/houdini-svelte/src/plugin/artifactData.test.ts b/packages/houdini-svelte/src/plugin/artifactData.test.ts index 61bffa87e..3629839a7 100644 --- a/packages/houdini-svelte/src/plugin/artifactData.test.ts +++ b/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 } }, diff --git a/packages/houdini-svelte/src/plugin/artifactData.ts b/packages/houdini-svelte/src/plugin/artifactData.ts index b6311d4e7..9c5d0eb8d 100644 --- a/packages/houdini-svelte/src/plugin/artifactData.ts +++ b/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, { diff --git a/packages/houdini-svelte/src/runtime/stores/base.ts b/packages/houdini-svelte/src/runtime/stores/base.ts index 075262db4..92ed33347 100644 --- a/packages/houdini-svelte/src/runtime/stores/base.ts +++ b/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, diff --git a/packages/houdini-svelte/src/runtime/stores/query.ts b/packages/houdini-svelte/src/runtime/stores/query.ts index ab424cbf5..117ef9023 100644 --- a/packages/houdini-svelte/src/runtime/stores/query.ts +++ b/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