You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/framework/svelte/migrate-from-v5-to-v6.md
+30-32Lines changed: 30 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,3 @@
1
-
## Overview
2
-
3
1
While Svelte v5 has legacy compatibility with the stores syntax from Svelte v3/v4, it has been somewhat buggy and unreliable for this adapter. The `@tanstack/svelte-query` v6 adapter fully migrates to the runes syntax, which relies on signals. This rewrite should also simplify the code required to ensure your query inputs remain reactive.
4
2
5
3
## Installation
@@ -10,50 +8,50 @@ Run `pnpm add @tanstack/svelte-query@latest` (or your package manager's equivale
10
8
11
9
> Note that `@tanstack/svelte-query` v6 depends on `@tanstack/query-core` v5.
12
10
13
-
## Thunks
11
+
## Function Inputs
14
12
15
-
Like the Solid adapter, most functions for the Svelte adapter now require options to be provided as a "thunk" (`() => options`) to provide reactivity.
13
+
Like the Angular and Solid adapters, most functions for the Svelte adapter now require options to be provided as a "thunk" (`() => options`) to provide reactivity. TypeScript will be your friend here and warn you if you're missing this notation.
16
14
17
-
```diff
18
-
-const query = createQuery({
19
-
+const query = createQuery(() => ({
20
-
queryKey: ['todos'],
21
-
queryFn: () => fetchTodos(),
22
-
-})
23
-
+}))
15
+
```ts
16
+
-const query =createQuery({// [!code --]
17
+
+const query=createQuery(() => ({// [!code ++]
18
+
queryKey: ['todos'],
19
+
queryFn: () =>fetchTodos(),
20
+
- }) // [!code --]
21
+
+}))// [!code ++]
24
22
```
25
23
26
24
## Accessing Properties
27
25
28
26
Given the adapter no longer uses stores, it is no longer necessary to prefix with `$`.
29
27
30
-
```diff
31
-
-{#if $todos.isSuccess}
32
-
+{#if todos.isSuccess}
33
-
<ul>
34
-
- {#each $todos.data.items as item}
35
-
+ {#each todos.data.items as item}
36
-
<li>{item}</li>
37
-
{/each}
38
-
</ul>
39
-
{/if}
28
+
```svelte
29
+
-{#if $todos.isSuccess}// [!code --]
30
+
+{#if todos.isSuccess}// [!code ++]
31
+
<ul>
32
+
- {#each $todos.data.items as item}// [!code --]
33
+
+ {#each todos.data.items as item}// [!code ++]
34
+
<li>{item}</li>
35
+
{/each}
36
+
</ul>
37
+
{/if}
40
38
```
41
39
42
40
## Reactivity
43
41
44
42
You previously needed to do some funky things with stores to achieve reactivity for inputs. This is no longer the case! You don't even need to wrap your query in a `$derived`.
0 commit comments