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!

[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

[niemyjski]

@elliott-with-the-longest-name-on-github would be great to start a new thread and or pr into main with any breaking changes? Thanks again for all of your help getting this across the finish line.

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

[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

[DoctorRyner]

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

[DoctorRyner]

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?

[hmnd]

I don't have a direct solution for you, but if you just use meStore.data instead of destructuring, you won't face that error.

[frederikhors]

Thanks. I think is still a bug.