Skip to content

fix: sync query state in broadcast added events#10835

Open
raashish1601 wants to merge 1 commit into
TanStack:mainfrom
raashish1601:fix/broadcast-adds-query-state
Open

fix: sync query state in broadcast added events#10835
raashish1601 wants to merge 1 commit into
TanStack:mainfrom
raashish1601:fix/broadcast-adds-query-state

Conversation

@raashish1601
Copy link
Copy Markdown
Contributor

@raashish1601 raashish1601 commented May 30, 2026

Summary

  • Include query state in broadcast added events so new clients can hydrate initial query state immediately.
  • Guard setState updates for added messages without state so older payloads remain compatible.
  • Add regression test for state propagation when a query with existing state is added on another client.

Summary by CodeRabbit

  • Bug Fixes

    • Improved cross-tab synchronization reliability by ensuring state information is properly included and validated in broadcast messages, preventing synchronization failures.
  • Tests

    • Added verification test for cross-tab synchronization functionality across multiple browser tabs.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 30, 2026

📝 Walkthrough

Walkthrough

This PR enhances cross-tab query synchronization in the experimental broadcast client. The implementation now includes the state field when broadcasting newly added queries and defensively handles missing state on receipt. Tests verify that query state properly synchronizes from a sender to receiver client across tabs.

Changes

Cross-tab query state synchronization

Layer / File(s) Summary
State field in broadcast 'added' messages
packages/query-broadcast-client-experimental/src/index.ts
When broadcasting a query with type added, the state field is now included in the message payload. When handling an incoming added message for a query that already exists, the code checks for missing or falsy state and returns early to prevent calling setState with undefined values.
Cross-tab synchronization tests
packages/query-broadcast-client-experimental/src/__tests__/index.test.ts
Imports are consolidated to include QueryClient, QueryCache, and QueryState. A shared broadcastChannel constant is introduced. The existing cleanup test is adjusted to use the constant. A new async test creates sender and receiver clients, seeds a query state in the sender, starts broadcasting on both clients, waits for the receiver cache to reflect the seeded state, and verifies cleanup.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Across the tabs, a query goes—
State bundled up from sender's rows.
Receiver waits with patient eyes,
Till sync completes, no more surprise!
Cross-tab harmony, tested true. 📡✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description clearly explains the changes and motivation but does not follow the repository's required template structure with sections like 'Changes', 'Checklist', and 'Release Impact'. Restructure the description to match the template: add a '## 🎯 Changes' section, include the '✅ Checklist' with required items, and specify '🚀 Release Impact' indicating whether a changeset was generated.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately and concisely describes the main change: syncing query state in broadcast added events, which aligns with the core functionality modifications.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/query-broadcast-client-experimental/src/__tests__/index.test.ts (1)

32-76: ⚡ Quick win

Consider adding test coverage for backward compatibility.

The test verifies that state propagates when present in the "added" message (the happy path). However, the defensive guard added in index.ts (lines 96-98) suggests concern for backward compatibility with older messages that lack state.

Consider adding a test case that verifies the behavior when an "added" message arrives without state:

  • For existing queries: should not call setState(undefined)
  • For new queries: should build with default/empty state
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/query-broadcast-client-experimental/src/__tests__/index.test.ts`
around lines 32 - 76, Add a new test in index.test.ts that simulates receiving
an "added" broadcast message without a state payload and asserts
backward-compatible behavior: for an existing query (create a seeded query via
receiverClient.getQueryCache().build) ensure the receiver's state is not
replaced with undefined (use receiverClient.getQueryCache().find(...).state to
assert it stays intact), and for a new query ensure the receiver builds a
default/empty state (assert find(...)?.state is defined and matches default
shape). Use the same setup helpers (broadcastQueryClient, senderClient,
receiverClient, broadcastChannel) and send an "added" message without a state
field through the broadcastChannel to trigger the code paths guarded in
index.ts.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/query-broadcast-client-experimental/src/__tests__/index.test.ts`:
- Around line 32-76: Add a new test in index.test.ts that simulates receiving an
"added" broadcast message without a state payload and asserts
backward-compatible behavior: for an existing query (create a seeded query via
receiverClient.getQueryCache().build) ensure the receiver's state is not
replaced with undefined (use receiverClient.getQueryCache().find(...).state to
assert it stays intact), and for a new query ensure the receiver builds a
default/empty state (assert find(...)?.state is defined and matches default
shape). Use the same setup helpers (broadcastQueryClient, senderClient,
receiverClient, broadcastChannel) and send an "added" message without a state
field through the broadcastChannel to trigger the code paths guarded in
index.ts.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1efdc65a-63a0-4a67-bdf8-79f771188a8a

📥 Commits

Reviewing files that changed from the base of the PR and between 7fa2781 and a5b9a00.

📒 Files selected for processing (2)
  • packages/query-broadcast-client-experimental/src/__tests__/index.test.ts
  • packages/query-broadcast-client-experimental/src/index.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant