Svelte: `isPlaceholderData` not working as expected

[wiscaksono]

Describe the bug

Hey folks!

I'm trying to get TanStack Svelte Query working with the new Svelte 5 runes, but I've hit a wall with isPlaceholderData.

I'm using placeholderData: keepPreviousData so that when a new query is triggered, the old data stays visible. I was expecting $query.isPlaceholderData to flip to true during that background fetch, but it just stays false the whole time. The weird part is that the data itself updates correctly, it's just the status flag that isn't working as I'd expect.

Here’s my component code:

<script lang="ts">
  import { createQuery, keepPreviousData } from '@tanstack/svelte-query';

  let count = $state(1);

  const query = $derived(createQuery({
    queryKey: [count],
    queryFn: async () => {
      // Added a delay to make the fetching state more obvious
      await new Promise(r => setTimeout(r, 500)); 
      const data = await fetch(`https://jsonplaceholder.typicode.com/todos/${count}`)
        .then(response => response.json());
      return data;
    },
    placeholderData: keepPreviousData
  }));
</script>

<p>ID: {count}</p>
<p>isPlaceholderData: {$query.isPlaceholderData}</p>
<button onclick={() => count++}>Fetch Next</button>
<pre>{JSON.stringify($query.data, null, 2)}</pre>

I feel like I'm probably missing something obvious. Is this the wrong way to use $derived with createQuery, or is there some other reactivity quirk I'm not aware of?

Would really appreciate any ideas. Thanks!!!

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-ihemfuwk?file=src%2Froutes%2F%2Bpage.svelte

Steps to reproduce

1. Clone/fork the provided StackBlitz reproduction case
2. Load the app - it displays ID, isPlaceholderData status, and current data
3. Click "Fetch Next" button to trigger a query with new count parameter
4. Observe the isPlaceholderData value during the 500ms delay
5. Note that isPlaceholderData remains false throughout, even while background fetch occurs
6. Repeat clicks show data updates correctly but status flag never changes

Expected behavior

When using placeholderData: keepPreviousData in a Svelte component with $derived and createQuery, I expect $query.isPlaceholderData to be true during background refetches while the previous data is being displayed.

Specifically:

1. Initial query loads: isPlaceholderData should be false
2. When triggering a new query (different queryKey): isPlaceholderData should become true immediately
3. During the background fetch: isPlaceholderData should remain true while showing old data
4. Once new data arrives: isPlaceholderData should return to false

This behavior would indicate that the currently displayed data is placeholder data from a previous query, which is essential for building proper loading states and user feedback.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS Tahoe 26.0
• Browser: Chrome 139.1.7258.139
• Framework: Svelte 5.39.3

Tanstack Query adapter

svelte-query

TanStack Query version

^5.89.0

TypeScript version

^5.9.2

Additional context

No response

[TkDodo]

It seems that the placeholderData function is never invoke apart from the initial run (where we have no placeholderData). So not only do we have isPlaceholderData: false, we also have no placeholderData at all.

Not sure why that is, this works fine in react. @lachlancollins can you have a look please

[lachlancollins]

Hi @wiscaksono , there is a WIP update to the svelte adapter which works with runes. This should hopefully be released reasonably shortly. You can read more here: #7413

[wiscaksono]

@lachlancollins Thank you for the update! I hope the release comes as soon as possible.