-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(svelte-query): Svelte 5 adapter #6981
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
@lachlancollins in case u want to want on this... fyi there are 3 form of Reactivity approach currentlyPass 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 creaetQuerywe 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 |
fd233da
to
4974ba8
Compare
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 😄 |
@lachlancollins @zhihengGet what is all left to get this working with latest rc? Is the current approach good? |
@lachlancollins @zhihengGet what is all left to get this working with latest rc? Is the current approach good? cc @tannerlinsley |
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 6548f1d. 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
Sent with 💌 from NxCloud. |
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 6548f1d:
|
I'm running into a bit of a dx headache trying to have shared reusable queries (via exports) and svelte 5. Previously I handled this by passing a readable and using derived from that. Now I'm just trying to use a reactive object. But I feel like when this gets updated via derived, might have an issue. Still thinking on it but wanted to share.
Page
export function getStackByIdQuery(props: { id?: string }) {
}
|
i ported svelte-4 query to svelte 5
Done: (i have used below myself and they seem to work just fine)
TODO:
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