Skip to content

Commit 9f82d8e

Browse files
docs(svelte-query): fix diff notation (#9717)
1 parent a99f771 commit 9f82d8e

File tree

1 file changed

+30
-32
lines changed

1 file changed

+30
-32
lines changed

docs/framework/svelte/migrate-from-v5-to-v6.md

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
## Overview
2-
31
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.
42

53
## Installation
@@ -10,50 +8,50 @@ Run `pnpm add @tanstack/svelte-query@latest` (or your package manager's equivale
108

119
> Note that `@tanstack/svelte-query` v6 depends on `@tanstack/query-core` v5.
1210
13-
## Thunks
11+
## Function Inputs
1412

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

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 ++]
2422
```
2523
2624
## Accessing Properties
2725
2826
Given the adapter no longer uses stores, it is no longer necessary to prefix with `$`.
2927
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}
4038
```
4139
4240
## Reactivity
4341
4442
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`.
4543
46-
```diff
47-
-const intervalMs = writable(1000)
48-
+let intervalMs = $state(1000)
49-
50-
-const query = createQuery(derived(intervalMs, ($intervalMs) => ({
51-
+const query = createQuery(() => ({
52-
queryKey: ['refetch'],
53-
queryFn: async () => await fetch('/api/data').then((r) => r.json()),
54-
refetchInterval: $intervalMs,
55-
-})))
56-
+}))
44+
```ts
45+
- const intervalMs = writable(1000) // [!code --]
46+
+ let intervalMs = $state(1000) // [!code ++]
47+
48+
- const query = createQuery(derived(intervalMs, ($intervalMs) => ({ // [!code --]
49+
+ const query = createQuery(() => ({ // [!code ++]
50+
queryKey: ['refetch'],
51+
queryFn: async () => await fetch('/api/data').then((r) => r.json()),
52+
refetchInterval: $intervalMs,
53+
- }))) // [!code --]
54+
+ })) // [!code ++]
5755
```
5856

5957
## Disabling Legacy Mode

0 commit comments

Comments
 (0)