feat(svelte-query): 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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Jun 20, 2024 7:39am

[zhihengGet]

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

there are 3 form of Reactivity approach currently

Pass Function (recommended)

let a = $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)

let a= $state()  // will work
let b=$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

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

let a= $state()  // will work
let b=$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 !

let a= $state()  // will work
createQuery({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] .../@[email protected]_@[email protected][email protected]/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 4f91fd4. 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:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3

---

Sent with 💌 from NxCloud.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4f91fd4:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration