-
Notifications
You must be signed in to change notification settings - Fork 109
Document how to destructure in Svelte #733
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
Document how to destructure in Svelte #733
Conversation
…#414) ## Summary This commit addresses issue #414 where users reported that destructuring the return value from useLiveQuery() breaks reactivity in Svelte 5. ## Root Cause This is a fundamental limitation of Svelte 5's reactivity system, not a bug in the library. When objects with getters are destructured, the destructuring evaluates getters once and captures the values at that moment, losing the reactive connection. ## Solution Added comprehensive documentation explaining: - Why direct destructuring breaks reactivity - Two correct usage patterns: 1. Use dot notation (recommended): `query.data`, `query.isLoading` 2. Wrap with $derived: `const { data } = $derived(query)` ## Changes - Updated JSDoc comments in useLiveQuery.svelte.ts with detailed explanation and examples - Updated README.md with clear usage guidelines - Added test case demonstrating the correct $derived pattern - All 23 existing tests continue to pass ## References - Issue: #414 - Svelte documentation: sveltejs/svelte#11002 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
The README is intentionally kept small, so reverting the detailed documentation. The comprehensive documentation remains in the JSDoc comments in useLiveQuery.svelte.ts. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
More templates
@tanstack/angular-db
@tanstack/db
@tanstack/db-ivm
@tanstack/electric-db-collection
@tanstack/query-db-collection
@tanstack/react-db
@tanstack/rxdb-db-collection
@tanstack/solid-db
@tanstack/svelte-db
@tanstack/trailbase-db-collection
@tanstack/vue-db
commit: |
|
Size Change: 0 B Total Size: 84.3 kB ℹ️ View Unchanged
|
|
Size Change: 0 B Total Size: 2.89 kB ℹ️ View Unchanged
|
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Fixes #414
Summary
This commit addresses issue #414 where users reported that destructuring the return value from useLiveQuery() breaks reactivity in Svelte 5.
Root Cause
This is a fundamental limitation of Svelte 5's reactivity system, not a bug in the library. When objects with getters are destructured, the destructuring evaluates getters once and captures the values at that moment, losing the reactive connection.
Solution
Added comprehensive documentation explaining:
query.data,query.isLoadingconst { data } = $derived(query)Changes
References
🤖 Generated with Claude Code
🎯 Changes
✅ Checklist
pnpm test:pr.🚀 Release Impact