WIP: Svelte 5 adapter

[zhihengGet]

i ported svelte-4 query to svelte 5

Done: (i have used below myself and they seem to work just fine)

• createQuery
• createMutation
• useQueryClient

TODO:

• createQueries (i did it but based on solid not sure if it works)
• unit tests (pending on svelte 5 on how to test runes)
• isFetching (svelte 4 version should be ok)
• isMutating (svelte 4 version should be ok)
• isRestoring (svelte 4 version should be ok)

i already published this svelte 5 draft version under svelte-query-runes package if people want to try it out ! i personally have been using createQuery and createMutation in my own project it work just fine !

to use it , you can checkout my messy sample code in examples/svelte-melt

if anyone want to take this over please feel free to do so ! i personally only need createQuery and createMutation

[zhihengGet]

@lachlancollins in case u want to want on this... fyi

there are 3 form of Reactivity approach currently

Pass Function (recommended)

leta=$state(something)createQuery(()=>{return{ ....}}// this will be reactive for both $state and $derived and other edge cases 

Pass Attribute Function (currently, i added this for enabled+queryKey)

leta=$state()// will workletb=$derived()// enabled is a fn createQuery({queryKey: [a],queryFn:()=>{},enabled:()=>{}})

passing $derived to queryKey does not work i believe, if u change b, query wont update

leta=$state()letb=$derived()// enabled is a fn createQuery({queryKey:[b],queryFn:()=>{},enabled:()=>{}})// BAD

leta=$state()// will workletb=$derived(a+1)// wont work if u pass b to queryKey instead of a(u have to pass ()=>b to key), other options require u to pass functions i.e enabled, // enabled is a fn createQuery({queryKey: ()=>[b],queryFn:()=>{},enabled:()=>{}})// good

pass $state to queryKey & enabled is fine too(..need to be a proxy value) inside it !

leta=$state()// will workcreateQuery({queryKey: [a],queryFn:()=>{},enabled:!a// if a.a is a number then enabled won't work })// queryKey can be something that has $state in it 

output of creaetQuery

we can return function or return a proxy runes , i choose the 2nd one since it has better DX , im not sure if theres some edges cases tho

[max-got]

One additional thing i encountered, would be nice to fix this small formatting error in Devtools.svelte:

-<div class="tsqd-parent-container" bind:this={ref} />+<div class="tsqd-parent-container" bind:this={ref} ></div>

Because of breaking: warn on self-closing non-void HTML tags #11114 it spams the console:

10:55:32 AM [vite-plugin-svelte] .../@tanstack+svelte-query-devtools@5.32.0_@tanstack+svelte-query@5.32.0_svelte@5.0.0-next.120/node_modules/@tanstack/svelte-query-devtools/dist/Devtools.svelte:46:0 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`

I can open a separate pr for this, but it's not that bad, it's just annoying 😄

[niemyjski]

@lachlancollins@zhihengGet what is all left to get this working with latest rc? Is the current approach good?

[niemyjski]

#7413

[niemyjski]

@lachlancollins@zhihengGet what is all left to get this working with latest rc? Is the current approach good? cc @tannerlinsley

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 07e64e7. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build --parallel=3

✅ Successfully ran 1 target

• nx run-many --target=build --exclude=examples/** --exclude=integrations/**

---

Sent with 💌 from NxCloud.

[lachlancollins]

@zhihengGet I'm going to merge this into a svelte-5-adapter branch.

I hope this will allow more people to contribute and get this over the line - to anybody who has been following this PR, please consider contributing!

[lachlancollins]

I'd encourage anyone interested to subscribe to the following discussion: #7413

[mhsnook]

is this double :: a typo?