fix(svelte-query-devtools): update the devtools instance when options change after mount by sukvvon · Pull Request #11009 · TanStack/query

sukvvon · 2026-06-30T16:22:23Z

🎯 Changes

The devtools instance in Devtools.svelte is created asynchronously inside onMount (via a dynamic import). Because it was declared as a plain let rather than $state, the $effects that call its setters (setPosition, setButtonPosition, setInitialIsOpen, setErrorTypes) never re-ran once the instance was created. As a result, changing those options after mount had no effect on the devtools — unlike the React and Solid adapters, where the instance is part of reactive state.

Declaring devtools as $state makes those effects re-run once the instance is created, so option changes are forwarded to the devtools instance.

Added tests for Devtools.svelte covering both the initial option values and option changes after mount being forwarded to the devtools instance (position, buttonPosition, initialIsOpen, errorTypes).

✅ Checklist

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

🚀 Release Impact

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

Summary by CodeRabbit

Bug Fixes
- Improved Svelte Query devtools so option changes are applied after the component is mounted.
- Ensured settings like position, button position, open state, and error types stay in sync when updated.
Tests
- Expanded coverage to verify that devtools options are passed correctly on first render and after updates.

nx-cloud · 2026-06-30T16:22:48Z

View your CI Pipeline Execution ↗ for commit fe47bdb

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	2m 22s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-06-30 16:33:28 UTC

github-actions · 2026-06-30T16:23:29Z

🚀 Changeset Version Preview

1 package(s) bumped directly, 3 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
`@tanstack/svelte-query-devtools`	6.1.36 → 6.1.37	Changeset
`@tanstack/svelte-query`	6.1.36 → 6.1.37	Dependent
`@tanstack/svelte-query-persist-client`	6.1.36 → 6.1.37	Dependent
`@tanstack/vue-query-devtools`	6.1.36 → 6.1.37	Dependent

coderabbitai · 2026-06-30T16:23:30Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 73b5e5a7-562b-4110-9a64-6d669028fbd1

📥 Commits

Reviewing files that changed from the base of the PR and between fe47bdb and 67b8c38.

📒 Files selected for processing (3)

.changeset/svelte-devtools-reactive-options.md
packages/svelte-query-devtools/src/Devtools.svelte
packages/svelte-query-devtools/tests/Devtools.svelte.test.ts

✅ Files skipped from review due to trivial changes (1)

.changeset/svelte-devtools-reactive-options.md

🚧 Files skipped from review as they are similar to previous changes (2)

packages/svelte-query-devtools/src/Devtools.svelte
packages/svelte-query-devtools/tests/Devtools.svelte.test.ts

📝 Walkthrough

Walkthrough

devtools in Devtools.svelte is changed from a plain let to a Svelte runes $state, enabling reactive prop forwarding after mount. Tests are added to mock TanstackQueryDevtools and verify that position, buttonPosition, initialIsOpen, and errorTypes are forwarded on initial render and on prop changes via rerender.

Svelte devtools reactive option forwarding

Layer / File(s)	Summary
`$state` fix `packages/svelte-query-devtools/src/Devtools.svelte`	`devtools` is declared with `$state<TanstackQueryDevtools \| undefined>(undefined)` instead of a plain `let`.
Prop-forwarding tests and changeset `packages/svelte-query-devtools/tests/Devtools.svelte.test.ts`, `.changeset/svelte-devtools-reactive-options.md`	Tests mock `TanstackQueryDevtools` with `vi` spies for `setPosition`, `setButtonPosition`, `setInitialIsOpen`, and `setErrorTypes`, asserting each is called on initial render and after `rerender`. Changeset records the patch bump.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Possibly related PRs

TanStack/query#10817: Adds forwarding of buttonPosition/position from the Svelte devtools component into the underlying @tanstack/query-devtools instance, directly at the same prop→devtools wiring boundary this PR fixes.
TanStack/query#10819: Extends tests for an adapter devtools component to verify position/buttonPosition prop changes are forwarded to the mocked TanstackQueryDevtools instance, matching this PR's test pattern.
TanStack/query#10823: Adds forwarding assertions for initialIsOpen and errorTypes via setInitialIsOpen/setErrorTypes in a different adapter, the same four setters tested in this PR.

Suggested labels

package: query-devtools

🐇 I hop through state with a tiny grin,
Options now flow where they should begin.
Position, errors, and buttons too,
Forwarded fresh when props come through.
Hop hop hooray, the devtools do!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main fix: forwarding option changes to the Svelte devtools instance after mount.
Description check	✅ Passed	The description follows the template with changes, checklist, and release impact sections filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/svelte-query-devtools-reactive-options

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-06-30T16:26:09Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@11009

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@11009

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@11009

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 67b8c38

github-actions · 2026-06-30T16:26:28Z

size-limit report 📦

Path	Size
react full	12.13 KB (0%)
react minimal	9.08 KB (0%)

… change after mount

sukvvon self-assigned this Jun 30, 2026

sukvvon requested review from TkDodo and lachlancollins June 30, 2026 16:26

sukvvon changed the title ~~fix(svelte-query-devtools): forward option changes to the devtools instance after mount~~ fix(svelte-query-devtools): update the devtools instance when options change after mount Jun 30, 2026

fix(svelte-query-devtools): update the devtools instance when options…

67b8c38

… change after mount

sukvvon force-pushed the fix/svelte-query-devtools-reactive-options branch from fe47bdb to 67b8c38 Compare June 30, 2026 16:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(svelte-query-devtools): update the devtools instance when options change after mount#11009

fix(svelte-query-devtools): update the devtools instance when options change after mount#11009
sukvvon wants to merge 1 commit into
mainfrom
fix/svelte-query-devtools-reactive-options

sukvvon commented Jun 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

nx-cloud Bot commented Jun 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 30, 2026

Uh oh!

coderabbitai Bot commented Jun 30, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

Possibly related PRs

Suggested labels

Uh oh!

pkg-pr-new Bot commented Jun 30, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

sukvvon commented Jun 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

nx-cloud Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 30, 2026

🚀 Changeset Version Preview

🟩 Patch bumps

Uh oh!

coderabbitai Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Possibly related PRs

Suggested labels

Uh oh!

pkg-pr-new Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 30, 2026

size-limit report 📦

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Jun 30, 2026 •

edited by coderabbitai Bot

Loading

nx-cloud Bot commented Jun 30, 2026 •

edited

Loading

coderabbitai Bot commented Jun 30, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 30, 2026 •

edited

Loading