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!

[niemyjski]

@lachlancollins is there a simplified starting repo that I can just add a sample to that is pre-configured?

[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 :-)

[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 :(

[nevil2]

Does it work when in svelte.config if you add compilterOptions: runes: true as below? ``` const config = { preprocess: vitePreprocess(), kit: { …… }, compilerOptions: { runes: true } } ``` This enforces Svelte 5 runes throughout app.

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

[niemyjski]

Release to manufacturing / GA