sveltejs / sveltejs/kit

`Await_waterfall` when refreshing query

Open
#15,003 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

I have a list of unprocessed items. Once an item has been processed, it's moved to a completed list. Multiple users work on the list at the same time. The list each user sees at any moment may go out of date since some items may have been removed or added by other users. Ideally I would use query.stream for this but it hasn't been implemented yet. Currently I just use a button to refresh the query that the users have to click from time to time.

If the query is refreshed when the data has changed, it works as expected. However, if the query is refreshed but the data remains the same, there will be an await_waterfall warning that I think shouldn't be there.

This simple setup should simulate it:

import { query } from '$app/server';
let data = 1;
export const getData = query(() => {
  if (Math.random() > 0.5) {
    console.log('Data changed');
    data += Math.random();
    return data;
  }
  console.log('Data not changed');
  return data;
});
<script lang="ts">
	import {getData} from './data.remote.js';
	const data = $derived(await getData());
</script>
{data}
<button onclick={()=>getData().refresh()}>Refresh</button>

It only happens if I use the $derived(await...) syntax. Using the await syntax in the template directly doesn't produce the warning but it's currently kind of buggy so I'm avoiding it for now.

Reproduction

https://stackblitz.com/edit/query-refresh-waterfall?file=src%2Froutes%2F%2Bpage.svelte,src%2Froutes%2Fdata.remote.ts

Logs

System Info
svelte@5.45.2
kit@2.49.0
Severity

annoyance

Additional Information

No response

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 StackBlitz reproduction, especially src/routes/+page.svelte and src/routes/data.remote.ts, and run the refresh case where the query data stays unchanged. Trace the interaction between query.refresh() and $derived(await getData()). Done means refreshing unchanged data no longer produces an await_waterfall warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.