sveltejs / sveltejs/kit

awaited query data is stale after page reload after .remote.ts change triggers HMR

Open
#16,956 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

awaiting submitter
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:

  1. run reproduction project in the linked commit
  2. edit .remote.ts file after page has loaded
  3. add some items that should change the response of the .remote.ts query
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.