Component queries broken on server-side on Svelte 3.56.0

[SeppahBaws]

Describe the bug

After upgrading to Svelte v3.56.0, component queries give an error when getting loaded on server-side

[web] TypeError: Cannot read properties of undefined (reading 'data')
[web]     at eval (/src/lib/QueryComponent.svelte:47:49)
[web]     at Object.$$render (/@fs/C:/dev/houdini/node_modules/.pnpm/svelte@3.56.0/node_modules/svelte/internal/index.mjs:1974:22)
[web]     at eval (/src/routes/plugin/query/component/+page.svelte:11:127)
[web]     at Object.$$render (/@fs/C:/dev/houdini/node_modules/.pnpm/svelte@3.56.0/node_modules/svelte/internal/index.mjs:1974:22)
[web]     at Object.default (root.svelte:51:43)
[web]     at /src/routes/plugin/+layout.svelte:5:41
[web]     at Object.$$render (/@fs/C:/dev/houdini/node_modules/.pnpm/svelte@3.56.0/node_modules/svelte/internal/index.mjs:1974:22)
[web]     at Object.default (root.svelte:45:41)
[web]     at eval (/src/routes/+layout.svelte:55:41)
[web]     at Object.$$render (/@fs/C:/dev/houdini/node_modules/.pnpm/svelte@3.56.0/node_modules/svelte/internal/index.mjs:1974:22)

Checked on e2e sveltekit project in the repo
brach: main @ commit d00c17b (houdini version 1.1.0)

Severity

blocking an upgrade

Steps to Reproduce the Bug

1. Open the e2e/kit project in the repo
2. Upgrade svelte version in package.json to 3.56.0
3. pnpm install && pnpm dev
4. click the Plugin_query_component link, see everything work nicely (page is loaded on client-side)
5. refresh the page, or navigate straight to the /plugin/query/component route (page is loaded on server-side)
6. see the http 500 error, and in the dev console see the error pasted above

Reproduction

No response

[AlecAivazis]

Hm... I was able to get the component query e2e test to work by replacing the $: with const. Houdini isn't really doing anything magic for component queries except for adding a reactive statement that calls fetch - I'll post the final version of the component below. I'm not sure why that change is enough to fix it yet but I thought I would mention it in case you needed a workaround.

For context, here is the fully transformed version of the component. Maybe you can see why making result a reactive declaration would make the store value be undefined on SSR.

<script lang="ts">
  import { ComponentQueryTestStore } from "$houdini/plugins/houdini-svelte/stores/ComponentQueryTest";
  import { isBrowser } from "$houdini/plugins/houdini-svelte/runtime/adapter";
  import { RequestContext } from "$houdini/plugins/houdini-svelte/runtime/session";
  import { getCurrentConfig } from "$houdini/runtime/lib/config";
  import { marshalInputs } from "$houdini/runtime/lib/scalars";
  import { graphql } from "$houdini";
  const _houdini_ComponentQueryTest = new ComponentQueryTestStore();

  export function _ComponentQueryTestVariables(
      {
          props
      }: {
          props: {
              id?: string;
          };
      }
  ) {
      return {
          id: props.id || "3"
      };
  }

  export let id = "";
  const result = _houdini_ComponentQueryTest;

  $: isBrowser && _houdini_ComponentQueryTest.fetch({
      variables: marshalInputs({
          config: getCurrentConfig(),
          artifact: _houdini_ComponentQueryTest.artifact,

          input: _ComponentQueryTestVariables.call(new RequestContext(), {
              props: {
                  id: id
              }
          })
      })
  });
</script>

{$result.data?.user.name}

[AlecAivazis]

Okay, so after clicking around a bit, I suspect this issue was caused by a bug introduced in sveltejs/svelte#7942. The tanstack svelte bindings also have a very similar problem (which is what makes me think this is a svelte issue, not a problem in Houdini). It looks like the PR is being reverted in sveltejs/svelte#8382 so hopefully this issue goes away when that is merged/released.

[AlecAivazis]

Just confirmed this is now fixed in 3.57.0 👍