HMR in storybook doesn't work with houdini plugin enabled

[macmillen]

Describe the bug

We use houdini together with storybook in our sveltekit project but HMR doesn't work and we need to always do a full page reload to see changes we make to the story components (which is a very bad DX). we also can't just remove the houdini() plugin for storybook because our components contain houdini fragments which we want to test.

Severity

annoyance

Steps to Reproduce the Bug

1. install storybook pnpx storybook@latest init
2. set up houdini
3. try to do changes to an example story component like Button.svelte
4. changes are now only visible on a full page refresh
5. go to vite.config.ts and remove houdini()
6. now it works and changes are directly updated in the browser

// vite.config.ts
plugins: [houdini(), sveltekit()],

Reproduction

No response

[gschwim]

I see similar behavior w/ houdini without storybook installed. Pages that do not use graphql queries appear to be unaffected until a page with a query is loaded, after which it appears the entirety of the svelte app is crashed. A reload gets things working again.

Reproduction here

[jycouet]

Thx for the repro, it's helpfull to have and understand what's going on 👍.

Let me try to explain what I saw:

• in SSR everything is working because, Houdini is waiting for data to display the page.
• in CSR, we navigate to the page, then we load data. So potentially, data is undefined when you do on the page. And your code doesn't seems to handle this case.

In /src/routes/qtest2/+page.svelte,
Failing test: Go to /, navigate to /qtest2 (with the menu for a CSR load). It will fail. ❌

Now, update your code with:

<script>
	export let data;

	$: ({ Test2 } = data);
</script>

<h1>qtest2</h1>

{$Test2.data?.character?.name}

Test: Go to /, navigate to /qtest2 (with the menu for a CSR load). It will work. ✅

You can also do

<script>
	export let data;

	$: ({ Test2 } = data);
</script>

<h1>qtest2</h1>
{#if $Test2.fetching}
  fetching...
{:else}
  {$Test2.data.character.name}
{/if}

That will indicate to users that things are fetching & will navigate to a page really quickly before all data arrives. ⚡

Even more powerfull, you have the @loading directive that can display "Skeleton UIs". More about it here: https://houdinigraphql.com/guides/loading-states 🎩

---

If you don't like this behavior, you can also turn it off.
Here is the doc explaining various ways: https://houdinigraphql.com/api/query#loading-states

---

Let us know if I didn't catch something and/or close the ticket if it's all good 👍
Thx 🙏

[gschwim]

Very helpful, thank you. Explains what is going wrong. Interestingly, the example code I'm testing doesn't magically start working. I suspect that the api I'm hitting may be rate limiting me or something. I did test this in another code base I'm actively developing and it does indeed solve the problem.

Uncertain that this is a fix for the storybook issue. I jumped in thinking they were related. Maybe not. So, I'm not sure the original issue is fixed by this.