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@28f98f9)

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!

[jaakkonakaza]

This warning does not occur anymore when updating the Svelte versions to the current ones. Should I make a PR?

[niemyjski]

@lachlancollins can we get a release out? Svelte 5 has been out for a long while now.

[sgcullen]

Thanks for your work on this - keen to give it a try :-)

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

@lachlancollins / @zhihengGet

Looks like you two are the ones involved in the branch, sorry for the direct pings 😁

I'm one of the full-time Svelte Core maintainers. We love TanStack Query and really think it has a ton to offer the Svelte ecosystem, and would like to lend one of our FTEs to get modern Svelte 5 support shipped. I've spent some time reading through the current state of the Svelte 5 branch, and it looks like it might need a little bit of adjustment to align with Svelte 5's new paradigms
-- specifically, it looks like you guys are struggling a little bit with getting reactivity across the boundary into your hooks (I'm referring to the use of FunctionedParams utility type here).

Would you be interested? I can open a PR against the Svelte 5 branch with our best stab at it.

[lachlancollins]

@elliott-with-the-longest-name-on-github that would be amazing! The blocker has been handling the breaking change, but we've been working on a solution to that. If there are other improvements that can be made before we release, that would be fantastic.

EDIT: if you're on the TanStack discord, feel free to ping me in the #query channel

[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?

[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

[jakob-kruse]

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

Might I ask what RTM is?

I've also been using the branch for some time, also with query cache invalidation, optimistic updates etc. I did not encounter any comments yet.

Would love to see this getting merged!

[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?

[gchartier]

Not sure what all of you are discussing on a rewrite the branch fully works and I have an app in production with it for the past few months...

@niemyjski would you mind sharing a code example of how you are using svelte-query with svelte 5?

[niemyjski]

https://github.com/exceptionless/Exceptionless/tree/main/src/Exceptionless.Web/ClientApp

[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?