Svelte 5 Support

[niemyjski]

I'm wondering what is left to support svelte 5 and if the current approach is good. A lot of Svelte 5 apps are blocked so just trying to get a consensus of where community can help. #6981

[niemyjski]

I've been pretty limited for time to look into this. Is anyone else free to take the lead until I get more time?

[lachlancollins]

How can I try this?

The svelte 5 adapter is currently available on a branch: https://github.com/TanStack/query/tree/svelte-5-adapter

Each commit has a package preview - you can install a preview by running pnpm add https://pkg.pr.new/@tanstack/svelte-query@<LATEST COMMIT HASH> (e.g. https://pkg.pr.new/@tanstack/svelte-query@ee9346a)

What is left to do?

Now that svelte 5 is out, it hopefully shouldn't be long before this is released. Please try out the package and report any issues!

[niemyjski]

@elliott-with-the-longest-name-on-github do you know if it would also be possible to take a look at other tanstack projects like TanStack/table#5403 as it has been merged but we've also been waiting months for any kind of updates.

[SaintPepsi]

Is there anywhere we can continue following the progression of this @elliott-with-the-longest-name-on-github @lachlancollins @zhihengGet ? I would contribute but I don't know how.

[elliott-with-the-longest-name-on-github]

I was stuck on a couple of other priorities but finally had time to really sit down and dig in on what the best API for integrating with @tanstack/query-core was. I opened a draft PR: #8852.

I still have a bunch of testing to do to make sure everything works as expected, but I'd love feedback from everyone (especially maintainers) on the direction. Notes:

• The PR only continues from where the original effort was, so there are a lot of half-baked changes -- I haven't yet updated examples or integrations, only the svelte-query package
• I left a ton of comments explaining how it works, if anyone's curious. I'd recommend starting from this file and scrolling down if you want to read.

[Krulknul]

Just wondering - what's the status on this? I really really love the current svelte-5-adapter branch and have been using it in my project. Are there any plans to release this as an actual release any time soon?

[maximvl]

Monthly bump

[jakubdonovan]

@lachlancollins here is the most minimal version of my repo https://github.com/jakubdonovan/testing-svelte5query
The files you want to be looking at are

• lib/hooks/fetchAddressSuggestions.ts
• lib/components/address.svelte

[lachlancollins]

@jakubdonovan not sure, I'd need a repro to check. Are you using this preview adapter in a new project, or is this an old project you're converting over to svelte 5? If it's an old one, how did it work in svelte 4?

[jakubdonovan]

@jakubdonovan not sure, I'd need a repro to check. Are you using this preview adapter in a new project, or is this an old project you're converting over to svelte 5? If it's an old one, how did it work in svelte 4?

I was able to get it to work.

[frederikhors]

@jakubdonovan not sure, I'd need a repro to check. Are you using this preview adapter in a new project, or is this an old project you're converting over to svelte 5? If it's an old one, how did it work in svelte 4?

I was able to get it to work.

How?

[jakubdonovan]

@jakubdonovan not sure, I'd need a repro to check. Are you using this preview adapter in a new project, or is this an old project you're converting over to svelte 5? If it's an old one, how did it work in svelte 4?

I was able to get it to work.

How?

There was a typo in my query.

[jakubdonovan]

@jakubdonovan not sure, I'd need a repro to check. Are you using this preview adapter in a new project, or is this an old project you're converting over to svelte 5? If it's an old one, how did it work in svelte 4?

It still feels like something is wrong.
Typing just one letter results in 14 updates to the query (Queries should debounce and cancel as user continues typing to prevent queries from piling up.) I also don't think the errors are being reported properly. The error seems to be sent back to the data array while the error property of the query is null.

Is this the expected behaviour?

I just pushed a PR to reproduction repo

[lachlancollins]

To anyone following along, I've introduced a breaking change in #7804

To migrate, you will need to define options as functions, just like solid-query:

[jakubdonovan]

Is there any need to use $derived around your options, I'm assuming not.

I thought that it needed to be done this way because address was also a state and I wanted addressSuggestions to reevaluate when its dependency (address) changed.

[niemyjski]

Also, just noticed the mutation function that I had problems with and working to create a sample on created a new error this morning when I converted it to a function

export function mutateDemoteTab(props: DemoteProjectTabProps) {
    const queryClient = useQueryClient();
    return createMutation<FetchClientResponse<unknown>, ProblemDetails, { name: string }>(() => ({
        mutationKey: queryKeys.id(props.id),
        mutationFn: async ({ name }) => {

Error: No mutationFn found
    at Object.fn (mutation.ts:168:33)
    at run (retryer.ts:156:49)
    at Object.start (retryer.ts:221:9)
    at _a6.execute (mutation.ts:208:40)

I'm going to try tracking this down, wonder if it was a caching issue with vite.

[raymonddaikon]

Try adding a return

export function mutateDemoteTab(props: DemoteProjectTabProps) {
    const queryClient = useQueryClient();
    return createMutation<FetchClientResponse<unknown>, ProblemDetails, { name: string }>(() => {
return{
        mutationKey: queryKeys.id(props.id),
        mutationFn: async ({ name }) => {}
}
}
)

[niemyjski]

This was an issue with vite :(

[lachlancollins]

Yes, the new adapter requires runes.

[niemyjski]

Can we please get an updated build and or update on merging into main.

[lachlancollins]

I've just rebased the branch to be up-to-date with main. It won't be merged until after the stable svelte 5 release.

[niemyjski]

Thanks

[hmnd]

Svelte 5 is finally stable! Excited for support be merged soon.

[niemyjski]

Has anyone ran into an issue with mutateAsync? I'm using superforms with spa mode and when I await it returns the data correctly but immediately checking the mutate variable says it's pending. If I sleep/await a timeout for 1ms and check again it's correct.

Think on:input calls form validation, which calls mutateAsync.

[niemyjski]

https://github.com/exceptionless/Exceptionless/blob/feature/shadcn-forms/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/manage/%2Bpage.svelte#L34-L53 https://github.com/exceptionless/Exceptionless/blob/feature/shadcn-forms/src/Exceptionless.Web/ClientApp/src/lib/features/users/api.svelte.ts#L38-L59 is the code in question.. I really don't know why I need the hack for isPending

[jjones315]

Any timeline to getting the svelte-5-adapter branch merged?

[frederikhors]

We are all waiting. Has anyone had a chance to test out the news with version 5?

[alessandrojcm]

I've been using this beta with svelte 5 and so far so good. Just fyi I've only used basic queries, no mutations.

[niemyjski]

I've been using it extensively for months with svelte 5 RTM and deploying to production.

[frederikhors]

@alessandrojcm @niemyjski are you referring to https://github.com/TanStack/query/tree/svelte-5-adapter branch?

[alessandrojcm]

@alessandrojcm @niemyjski are you referring to https://github.com/TanStack/query/tree/svelte-5-adapter branch?

Yes that one

[RickRyan26]

We're all still waiting right?

Also can someone here smarter than me let me know if this Svelte 5 adapter would work with this repo before I dive in and rip my hair out?

https://github.com/ottomated/trpc-svelte-query

[zakariamofaddel]

I have tried the svelte 5 branch on my app and so far I have encountered one issue where a mutation like the one below causes a state_unsafe_mutation error:

import { createMutation } from "@tanstack/svelte-query";
import type { QueryClient } from "@tanstack/svelte-query";

const updateItem = async (id: string) => {
  const response = await fetch(`/api/items/${id}`);
  return response.json();
};

const getItem = async (id: string) => {
  const response = await fetch(`/api/items/${id}`);
  return response.json();
};

export const changeItem = (client: QueryClient) => {
  const mutation = createMutation(() => ({
    mutationFn: async ({ id }: { id: string }) => {
      const updateResponse = await updateItem(id);

      // Fetching another query inside mutationFn causes the `state_unsafe_mutation` error
      await client.fetchQuery({
        queryKey: ["item", id],
        queryFn: () => getItem(id)
      });

      return updateResponse;
    },
  }));

  return mutation;
};

In development the error does not seem to affect the app's functionality and the query is correctly fetched and the UI updates accordingly.
This also works correctly with stores in version ^5.60.6.

Is this a known limitation?

[hmnd]

I'm seeing a few issues here:

• Since you're not using the result from your refetch, you will probably have better luck (and be more DRY) if you just do client.invalidateQueries({ queryKey: ['item', id] }).
• Move the invalidation to onSettled() or onSuccess(), to avoid unnecessarily blocking your mutation from completing.
• Ensure you pass your client to createMutation as the second arg in case you nede to use your mutation from outside of the QueryClientProvider's context.

[zakariamofaddel]

@hmnd thanks for the reply!

To clarify:

• In the real code I need the call to be async and awaited before the mutation can be considered as completed, as makes sense for my case.
• As mentioned above, my case requires that the refetch blocks the mutation, so moving the code to the post-mutation hooks, would not be ideal.
• Not sure I understand the third point, but I am not using mutation or queries outside of the QueryClientProvider.

Ultimately this use case is completely valid, since it works correctly in the main branch and there is no mention of the code pattern in the example being prohibited.

[frederikhors]

What do you think about asking this on svelte repo issues?

[Jakeii]

Using fetchQuery inside of a mutation feels like an anti-pattern to me.

Can you share more details about your use case? Why does the fetch need to block the mutation?

[frederikhors]

I opened #8540. I think it concerns us too.

[Jakeii]

The https://github.com/TanStack/query/tree/svelte-5-adapter branch seems to be falling behind main @niemyjski @lachlancollins, is there anything we can do to help?

[niemyjski]

Please retweet https://x.com/blaken/status/1895450563049066934

[lachlancollins]

@niemyjski there are internal discussions going on, sorry for the delay.

[sgcullen]

I'm going around asking questions about Svelte 5 runes and svelte-query trying to get it to work but it looks like it isn't yet fully compatible? It does seem to work with without using runes however. Is my understanding correct?

[x-N0]

+1

[niemyjski]

@lachlancollins where can we follow these discussions and any updates to share here? Thanks again

[mary-ext]

Should it be relying on $state.raw() so that query data doesn't go through Svelte's deep reactivity? I'm not sure I'm seeing the benefits since currently the adapter doesn't reconcile between old/new query data, so the top-level value will always be replaced.

The proxying that Svelte does also makes it harder for query data manipulation, the values that you get from createQuery will be the proxied version, and running it through $state.snapshot just clones the query data (resulting in a completely different object identity)

[elliott-with-the-longest-name-on-github]

The current API doesn't deeply $state-ify: #8852

[DoctorRainer]

I hope we will get the working adapter soon, rn we have some issues with Svelte 4 version in our Svelte 5 project :c

[RickRyan26]

Like what?? Everything seems to be working fine for me

[DoctorRainer]

Like what?? Everything seems to be working fine for me

#7227

[elliott-with-the-longest-name-on-github]

@DoctorRyner #8852 (release candidate API) should fix this issue -- would love to get more feedback on it, so feel free to try it out and let me know what you think.

[HicaroD]

I am wondering if an issue I am dealing with is a problem with my code or the package:

Let's say I have the following code in the script tag of my component:

let query = useGetAllProducts();

if (query.isLoading) {
  console.log("loading");
}

if (query.isError) {
  console.log(query.error);
}

let searchQuery = $state("");
let filteredProducts: Product[] = $state([]);
$effect(() => {
  if (query.data) {
    filteredProducts = query.data.filter((product) => product.name.includes(searchQuery));
  }
});

The code above works fine, when the data is available, it will render everything properly on the screen however if I try to destructure, like below:

let { data: products, isLoading, isError, error } = useGetAllProducts();

if (isLoading) {
    console.log("loading");
}

if (isError) {
  console.log(error);
}

let searchQuery = $state("");
let filteredProducts: Product[] = $state([]);
$effect(() => {
  if (products) {
    filteredProducts = products.filter((product) => product.name.includes(searchQuery));
  }
});

The code stops working. By "stop working" I mean: it fetches the data (as I can see the JSON retrieved from the external API in the console), but it does not render the information on the screen, as if the package is uncapable of identifying that the data is now available.

Let me know if you need the full code.

Edit note:

Here is the implementation of useGetAllProducts:

import { ProductSchema } from "$lib/schemas/Products";
import { BASE_URL } from "$lib/utils/consts";
import { createQuery } from "@tanstack/svelte-query";
import { z } from "zod";

const GetAllProductsResponseSchema = z.array(ProductSchema);
export type GetAllProductsResponse = z.infer<typeof GetAllProductsResponseSchema>;

async function getAllProducts() {
  const response = await fetch(`${BASE_URL}/products/`, {
    headers: {
      "Content-Type": "application/json"
  });

  const body = await response.json();
  return GetAllProductsResponseSchema.parse(body.products);
}

export function useGetAllProducts() {
  return createQuery(() => ({
    queryKey: ["products"],
    queryFn: async () => await getAllProducts()
  }));
}

[HicaroD]

@HicaroD you would need to wrap useGetAllProducts in $derived for destructuring to work

I appreciate it. It works, however it causes an infinite loop of requests to the API. Do you have any idea how to solve this loop?

Edit note:

Solved it by calling the hook and then assigning its value to a derived state, just like that:

  let query = useGetAllProducts();
  let { data: products } = $derived(query);

[badgifter]

@HicaroD you would need to wrap useGetAllProducts in $derived for destructuring to work

I wonder if this would work too for a one liner?

  let { data: products } = $derived.by(( )=>useGetAllProducts( ) );

[HicaroD]

@HicaroD you would need to wrap useGetAllProducts in $derived for destructuring to work

I wonder if this would work too for a one liner?

  let { data: products } = $derived.by(( )=>useGetAllProducts( ) );

@badgifter it still causes an infinite loop. Am I misunderstanding the tool or is it a bug? If so, did they fix it in the svelte-5-support branch?

[hmnd]

@HicaroD you would need to wrap useGetAllProducts in $derived for destructuring to work

I wonder if this would work too for a one liner?

  let { data: products } = $derived.by(( )=>useGetAllProducts( ) );

@badgifter it still causes an infinite loop. Am I misunderstanding the tool or is it a bug? If so, did they fix it in the svelte-5-support branch?

Is there a problem with doing it in two lines which worked for you? 😜 I think the loop happens because wrapping in derived causes createQuery to be called on every update, rather than having a single instance of the query, with the reactivity contained to the passed in options thunk.

[HicaroD]

@HicaroD you would need to wrap useGetAllProducts in $derived for destructuring to work

I wonder if this would work too for a one liner?

  let { data: products } = $derived.by(( )=>useGetAllProducts( ) );

@badgifter it still causes an infinite loop. Am I misunderstanding the tool or is it a bug? If so, did they fix it in the svelte-5-support branch?

Is there a problem with doing it in two lines which worked for you? 😜 I think the loop happens because wrapping in derived causes createQuery to be called on every update, rather than having a single instance of the query, with the reactivity contained to the passed in options thunk.

No, I was just answering him.
I am using the two lines solution and it is working fine!

[frederikhors]

I'm trying the svelte-5-adapter branch for the first time and using Svelte Kit I'm getting:

Uncaught (in promise) Svelte error: state_unsafe_mutation
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
https://svelte.dev/e/state_unsafe_mutation

	in QueryClientProvider.svelte
	in +layout.svelte
	in root.svelte

I created a reproduction.

Steps:

1. Open the reproduction

2. Open the browser console to see the error

3. Comment all the Navbar.svelte file content

4. Reload the preview page

5. Now it works

Why is that?

[frederikhors]

Thanks. I think is still a bug.

[wont-work]

I encountered a similar bug and had to patch the library to resolve it. I have no clue if my patch breaks anything else hence why I'm not sending a PR, but everything seems to be working at a first glance

https://codeberg.org/KittyShopper/mastoapi-fe/commit/75f32ae7d595770a21e8a231da6157ac5825aa03

[frederikhors]

Thnks @wont-work. We're waiting for authors of this amazing PR.

[hmnd]

@frederikhors @wont-work didn't see your message, but found the same root cause! I've sent in a more complete fix in a pr #9493

[hmnd]

@frederikhors I repro'd the issue in tests so it should be solved, but would be great if you could try out the fix with
npm i https://pkg.pr.new/@tanstack/svelte-query@9493 :)

[Extarys]

So, hmm, how does someone use Tanstack query with Svelte 5 ? I tried the special branch, but it still doesn't seem to work for some reason (that, or I missed a step? 🤔 )

[hmnd]

How did you go about trying the special branch? It works great for me, aside from some issues I addressed in a PR that's yet to be merged.

[wont-work]

I tried getting it to work a while ago. There's a couple ways but they have tradeoffs. Last I heard it was being worked on. Svelte's "remote functions" have similar ergonomics to Tanstack Query.

i'm not entirely sure where that comes from, svelte's remote functions only really work if you control both ends of the API boundary, but if you're calling out to a public api by someone else with user credentials (where proxying it over your backend wouldn't make sense for privacy) it isn't really a replacement

[gchartier]

i'm not entirely sure where that comes from

I'm referring to the ergonomics of having some semblance of out-of-the-box loading, caching, error handling, and fetching states for usage in Svelte components without having to roll your own. This has always been one of my favorite things about TanStack Query.

svelte's remote functions only really work if you control both ends of the API boundary

Not necessarily, I'm using remote functions to communicate with an external API that I do not control and it's working very well for me. I store API credentials in .env, and access them in the remote function which is never exposed to the client.

[frederikhors]

@gchartier is right. But there's still a long way to go to be able to replace tanstack with SvelteKit.

[gchartier]

I agree, SvelteKit's remote functions are not a drop-in replacement for TanStack Query. There's still value in TanStack Query for more advanced use-cases such as fine-grained cache-invalidation, window focus refetching, retries, etc.

I also just want to make it clear that I love the high-quality work that has gone into Query and other TanStack projects. I'm a big fan of the work!

[nevil2]

Svelte 6 is on its way, and if Tanstack Query remain runes incompatible, Svelte user will have to start switching away.

It is around 18 months since Svelte 5 preview and 9+ months since Svelte 5 launch.

I am now removing Tanstack Query from my tech stack.

[DoctorRainer]

@DoctorRainer what did you move to?

Nothing really, we just use fetch directly and have a few helpers for it.

[niemyjski]

So just to recap this thread, we've gotten many pr's for svelte 5 support including from the svelte team and yet we cannot get this into main for over a year nor any feedback from tanstack team on eta. I'm going to be forced real soon consider my options as this doesn't seem to be progressing anywhere. I'm not sure what else we can do as a community.

[frederikhors]

We need something like swr for Svelte.

[RickRyan26]

We need something like swr for Svelte.

Would this work?

sveltejs/kit#13897.

"Client caching
Right now a query is cached and deduplicated as long as there's one active subscription to it. Maybe you want to keep things around in memory a little longer, for example to make back/forward navigation instantaneous? We haven't explored this yet (but have some ideas) and would love to hear your use cases (or lack thereof) around this.

Prerendered data could be kept in memory as long as the page is open — since we know it’s unchanging, it never needs to be refetched. The downside is that the memory could then never be freed up. Perhaps this needs to be configurable.

Conversely, for queries that we know will become stale after a certain period of time, it would be useful if the query function could communicate to the client that it should be refetched after n seconds."

[frederikhors]

@RickRyan26 yeah. But is still in the early days. And persistent cache is needed. But yeah I'm pretty confident it can replace tanstack query soon.

[HemalR]

Been following this closely and I was using the unmerged PR successfully. But have removed it now because Svelte remote functions are awesome! There are parts of it not well documented yet that have (at least for me) made the need for Svelte-Query redundant. Putting it out there in case it helps anyone.

[frederikhors]

Can you write a small post about it, @HemalR ? 🙏

[jacokok]

Been running the svelte 5 branch for a while and it is working great.
Is there a reason it is not getting merged? Anything we can help with?

[sgcullen]

I'm using the svelte 5 branch which is working well for me. I don't really know why this hasn't been merged. It would be great for Svelte to get more love - having come from React, Svelte is superb and is now my framework of choice.

[Krulknul]

Same here!

[Oungseik]

Is that branch typesafe? I got some type errors.

[jacokok]

Is that branch typesafe? I got some type errors.

I do not have any type issues with that branch. In fact everything works as expected just using new svelte 5 syntax instead of stores.

[niemyjski]

Your best hope is to get tanners attention on all platforms.Otherwise this will be sitting here for a very long time. Sent from my iPhoneOn Sep 19, 2025, at 4:55 AM, Saul ***@***.***> wrote: I'm using the svelte 5 branch which is working well for me. I don't really know why this hasn't been merged. It would be great for Svelte to get more love - having come from React, Svelte is superb and is now my framework of choice. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[lachlancollins]

Hi everyone following along here, as of #9502, the query repo uses changesets, and we are able to version packages independently. This means that individual adapters will be able to update without needing to wait for all the other packages (primarily core) to have substantial breaking changes too.

This means that the runes adapter is coming soon! This will be released as svelte-query v6. I would appreciate it if you could test out this final preview: #9694

Direct install command: pnpm add https://pkg.pr.new/@tanstack/svelte-query@9694

[wont-work]

In addition to #9493 which you seem to already be on top of, setQueryData in infinite queries don't reliably update the view (don't have a self-contained reproducer, but https://codeberg.org/KittyShopper/mastoapi-fe/src/branch/main/packages/outpost-fe/src/lib/timeline/Timeline.svelte#L173-L185 on my codebase triggers it)

[Oungseik]

I am using the final preview with orpc svelte query. It is perfectly working. Thank a lot for your hard work.

[lachlancollins]

In addition to #9493 which you seem to already be on top of, setQueryData in infinite queries don't reliably update the view (don't have a self-contained reproducer, but codeberg.org/KittyShopper/mastoapi-fe/src/branch/main/packages/outpost-fe/src/lib/timeline/Timeline.svelte#L173-L185 on my codebase triggers it)

Hi @wont-work , #9493 has been merged. I've migrated a test which is closest to your issue (it('should be able to set new pages with the query client')), and it passes on this PR, so I'm hoping your issue has been fixed.