Skip to content

fix(svelte-query): state_unsafe_mutation error with useIs... - #9493

Merged
lachlancollins merged 6 commits into
TanStack:svelte-5-adapterfrom
hmnd:fix/svelte-query-isfetching
Sep 27, 2025
Merged

fix(svelte-query): state_unsafe_mutation error with useIs...#9493
lachlancollins merged 6 commits into
TanStack:svelte-5-adapterfrom
hmnd:fix/svelte-query-isfetching

Conversation

@hmnd

@hmndhmnd commented Jul 24, 2025

Copy link
Copy Markdown
Contributor

🎯 Changes

Fixes the bug reported by @frederikhorshere.

I thoroughly dug into this issue until I found calls to Observer and MutataionOBserver were wrapped in a $derived(...) in order to make them reactive to the passed in client. This was resulting in unsafe mutation errors, and there was already an $effect.pre(...) used for updating options when they changed, so aside from the client reactivity, the $derived wasn't necessary.

To support reactivity for queryClient, the observer is now a $state and is reassigned whenever the client changes.

The useIsFetching and useIsMutating tests were previously passing because they used a QueryClient local to the component, rather than one from context. I've updated the tests to use a provider instead, in order to properly repro this issue.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

@hmnd
hmndforce-pushed the fix/svelte-query-isfetching branch from dd04604 to e22d61eCompareJuly 24, 2025 22:46
@lachlancollins
lachlancollins self-requested a review July 25, 2025 02:40
@nx-cloud

nx-cloudBot commented Jul 25, 2025

Copy link
Copy Markdown

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

To disable these notifications, a workspace admin can disable them in workspace settings.


View your CI Pipeline Execution ↗ for commit 62798d6

CommandStatusDurationResult
nx affected --targets=test:sherif,test:knip,tes...❌ Failed1m 17sView ↗
nx run-many --target=build --exclude=examples/*...✅ Succeeded6sView ↗

☁️ Nx Cloud last updated this comment at 2025-09-27 12:32:45 UTC

@pkg-pr-new

pkg-pr-newBot commented Jul 25, 2025

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9493

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9493

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9493

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9493

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9493

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9493

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9493

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9493

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9493

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9493

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9493

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9493

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9493

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9493

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9493

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9493

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9493

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9493

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9493

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9493

commit: 62798d6

@lachlancollinslachlancollins self-assigned this Sep 22, 2025

@lachlancollinslachlancollins left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @hmnd , I don't seem to have permission to sync this with the changes in the svelte-5-adapter. Could you fix the merge conflicts?

@hmnd
hmndforce-pushed the fix/svelte-query-isfetching branch from 4f57fd5 to ab7e6b4CompareSeptember 27, 2025 05:40
@changeset-bot

changeset-botBot commented Sep 27, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 62798d6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai

coderabbitaiBot commented Sep 27, 2025

Copy link
Copy Markdown
Contributor

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@hmnd
hmndforce-pushed the fix/svelte-query-isfetching branch from ab7e6b4 to 4f57fd5CompareSeptember 27, 2025 05:47
@hmnd

hmnd commented Sep 27, 2025

Copy link
Copy Markdown
ContributorAuthor

@lachlancollins should be fixed now :)

@lachlancollinslachlancollins left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if it worked, it's still showing all the conflicts

@hmnd

hmnd commented Sep 27, 2025

Copy link
Copy Markdown
ContributorAuthor

Not sure if it worked, it's still showing all the conflicts

Oh sorry, git fetch only pulled from my fork, not upstream 🤦

One sec

…afe_mutation
fixes useIsFetching and useIsMutating in svelte 5 adapter
@hmnd
hmndforce-pushed the fix/svelte-query-isfetching branch from 4f57fd5 to f8f22f7CompareSeptember 27, 2025 06:15
Comment threadpnpm-lock.yaml
@hmnd
hmndforce-pushed the fix/svelte-query-isfetching branch 3 times, most recently from a9c586a to 83143f0CompareSeptember 27, 2025 06:42
Comment threadpackages/svelte-query/vite.config.ts Outdated
@hmnd
hmndforce-pushed the fix/svelte-query-isfetching branch from 83143f0 to ac2afcfCompareSeptember 27, 2025 07:15

onDestroy(() => {
unsubscribe()
let result = $derived(observer.getCurrentResult())

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lachlancollins do you think we need to keep the Svelte peer dep pinned to as low as 5.7.0, or could we bump that to at least 5.25.0so that assigning to $derived like this is supported? This was part of eslint --fix, but if we need to stay on the lower version, I'll have to revert this back to a manually managed $state.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy to bump the peer dependency version!

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hmnd I've updated this on the target branch.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like this change(?) might have caused tests to start failing. It's difficult to know though, as the force pushes have erased the history.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevermind, I found the diff in a branch I cloned earlier. Tests are all passing again, so I think I'll merge this! Thanks heaps for your time @hmnd !

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for getting this merged @lachlancollins! Sorry about the force pushes 😅

@lachlancollins
lachlancollins merged commit 968d6a8 into TanStack:svelte-5-adapterSep 27, 2025
6 of 7 checks passed
lachlancollins added a commit that referenced this pull request Sep 30, 2025
* WIP: Svelte 5 adapter (#6981)
* feat(svelte-query): Improve svelte runes API (#8852)
* feat: Draft proposal
* chore: Improve reactive containers
* ci: apply automated fixes
* oops
* fix: Update API, add a bunch of tests
* merge main
* fix: use const
* more tests
* feat: More tests, back to thunks, fixed svelte-query-persist-client
* feat: More tests and examples!
* lockfile
* fixes
* Fix current CI errors
* More small fixes/tweaks
* Remove test.only
* ci: apply automated fixes
* Fix pnpm-lock, fix import order
* update main docs
* feat: More tests
* ci: apply automated fixes
* add back old tests
* Cleanup
* Fix persist client
* Fix useMutationState
---------
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
* Use sleep from query-test-utils
* Simplify test reset logic
* Fix some merge conflicts
* More fixes
* A few more fixes
* Fix useMutationState
* Add changeset
* Add migration docs
* Replace Set with SvelteSet
* Update minimum svelte version
* Bump svelte-eslint-parser
* Unwrap createQuery test
* fix(svelte-query): `state_unsafe_mutation` error with `useIs...` (#9493)
* fix(svelte-query): don't wrap observers in derived to avoid state_unsafe_mutation
fixes useIsFetching and useIsMutating in svelte 5 adapter
* test(svelte-query): wrap (useIs...) tests in QueryClientProvider to test non colocated query
* fix(svelte-query): update observers when passed in query client changes
* fix(svelte-query): simplify creatMutation sub/unsub
* Refactor result handling in createMutation.svelte.ts
Replace derived state with direct state and add watchChanges for result updates.
---------
Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
* chore(svelte-query): fix eslint config (#9699)
* chore(svelte-query): fix eslint config
* Use @typescript-eslint/parser directly
* ci: apply automated fixes
* Fix sherif
* Update docs and changeset
* Update keywords
---------
Co-authored-by: Zhiheng Zhang <55773069+zhihengGet@users.noreply.github.com>
Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: David <david@hmnd.io>
Hellol77 pushed a commit to Hellol77/query that referenced this pull request Oct 14, 2025
* WIP: Svelte 5 adapter (TanStack#6981)
* feat(svelte-query): Improve svelte runes API (TanStack#8852)
* feat: Draft proposal
* chore: Improve reactive containers
* ci: apply automated fixes
* oops
* fix: Update API, add a bunch of tests
* merge main
* fix: use const
* more tests
* feat: More tests, back to thunks, fixed svelte-query-persist-client
* feat: More tests and examples!
* lockfile
* fixes
* Fix current CI errors
* More small fixes/tweaks
* Remove test.only
* ci: apply automated fixes
* Fix pnpm-lock, fix import order
* update main docs
* feat: More tests
* ci: apply automated fixes
* add back old tests
* Cleanup
* Fix persist client
* Fix useMutationState
---------
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
* Use sleep from query-test-utils
* Simplify test reset logic
* Fix some merge conflicts
* More fixes
* A few more fixes
* Fix useMutationState
* Add changeset
* Add migration docs
* Replace Set with SvelteSet
* Update minimum svelte version
* Bump svelte-eslint-parser
* Unwrap createQuery test
* fix(svelte-query): `state_unsafe_mutation` error with `useIs...` (TanStack#9493)
* fix(svelte-query): don't wrap observers in derived to avoid state_unsafe_mutation
fixes useIsFetching and useIsMutating in svelte 5 adapter
* test(svelte-query): wrap (useIs...) tests in QueryClientProvider to test non colocated query
* fix(svelte-query): update observers when passed in query client changes
* fix(svelte-query): simplify creatMutation sub/unsub
* Refactor result handling in createMutation.svelte.ts
Replace derived state with direct state and add watchChanges for result updates.
---------
Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
* chore(svelte-query): fix eslint config (TanStack#9699)
* chore(svelte-query): fix eslint config
* Use @typescript-eslint/parser directly
* ci: apply automated fixes
* Fix sherif
* Update docs and changeset
* Update keywords
---------
Co-authored-by: Zhiheng Zhang <55773069+zhihengGet@users.noreply.github.com>
Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: David <david@hmnd.io>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@hmnd@lachlancollins