awaited query data is stale after page reload after .remote.ts change triggers HMR
after making a change to .remote.ts during development and HMR kicks in, any refreshes to the page awaiting a query on that .remote.ts-file seems to retrieve the initial async awaited query data. It does not supply changed data, even if query.refresh or query.set has been used.
See attached video. Before HMR having hit, everything behaves as expected on page reload.
After editing .remote.ts file and HMR hits, see the wrongful reload behavior.
Also occurs when caching disabled in inspector (no 304s, just 200s on the GETs)
https://github.com/williamviktorsson/kit/commit/0cdf1ac08d9d101263992f36f2c2d90272574de5
reproduction project here in playground/basic
steps to reproduce:
- run reproduction project in the linked commit
- edit .remote.ts file after page has loaded
- add some items that should change the response of the .remote.ts query
- reload page and see state response
https://github.com/user-attachments/assets/d41149e7-1dd9-4df7-9a13-e69801ffeb02
see below how I am awaiting my data on the displayed page:
<script lang="ts">
import { addTodo, getTodos, deleteTodo } from "./todos.remote";
</script>
<ul>
{#each await getTodos() as todo}
{@const del = deleteTodo.for(todo.id)}
<form {...del}>
<li>{todo.text}</li>
<button disabled={!!del.pending}>delete</button>
</form>
{/each}
</ul>
<form {...addTodo}>
<input {...addTodo.fields.text.as("text")} />
<button>add</button>
</form>Source: sveltejs/kit