awaited query data is stale after page reload after .remote.ts change triggers HMR
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction project in playground/basic and the linked commit, then run it and follow the listed steps while editing the .remote.ts file after HMR. Trace the reload and awaited query behavior around that reproduction; done means a page reload after the change returns current query data rather than the initial response.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- developer-experience, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100