fix(vue-query-devtools): update client when prop changes

[grzdev]

🎯 Changes

In @tanstack/vue-query-devtools, both devtools.vue (floating) and devtoolsPanel.vue (embedded) captured props.client once upon instantiation. While watchers updated other options such as position, theme, and error types, devtools.setClient(...) was never called when the client prop changed.

• Call devtools.setClient(props.client || client) within watchEffect in both components.
• Fall back to the initially resolved context client if an explicit client override is reset to undefined.
• Add unit tests for both components verifying dynamic client switching without unmounting and returning to the context client.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested code changes locally with pnpm run test:pr, or these tests do not apply to this pull request.
• I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 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

  • Vue Query Devtools now updates correctly when the configured client changes.
  • Floating and embedded devtools honor explicit client overrides and restore the contextual client when the override is removed.
  • Client updates now occur without remounting the devtools components.

• Tests

  • Added coverage for client switching and fallback behavior in both devtools variants.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 5385681f-33b5-4b0a-9b72-265097d8160f

📥 Commits

Reviewing files that changed from the base of the PR and between 1893a96 and b548ea7.

📒 Files selected for processing (4)

• .changeset/quiet-vue-clients.md
• packages/vue-query-devtools/src/__tests__/client.test.ts
• packages/vue-query-devtools/src/devtools.vue
• packages/vue-query-devtools/src/devtoolsPanel.vue

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The Vue devtools components now update their client through setClient when the prop or fallback client changes. Tests cover floating and embedded components, explicit overrides, fallback restoration, and avoidance of remounts.

Changes

Vue devtools client synchronization

Layer / File(s)	Summary
Reactive client synchronization packages/vue-query-devtools/src/devtools.vue, packages/vue-query-devtools/src/devtoolsPanel.vue, .changeset/quiet-vue-clients.md	Both components call setClient inside watchEffect, using the explicit client prop or the resolved fallback client.
Client switching validation packages/vue-query-devtools/src/__tests__/client.test.ts	Tests cover explicit and reactive client changes, fallback restoration, single mounting, and both devtools components.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to b548e

Vue devtools now follows client-prop changes without remounting, including restoring the context client when an override is removed. The covered behavior is ready to merge with no identified release risk.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the primary change: updating the Vue Query devtools client when the client prop changes.
Description check	✅ Passed	The description explains the motivation, implementation, fallback behavior, tests, checklist status, and changeset impact. It matches the required template and is complete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
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 unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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