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

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

[frederikhors]

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