refactor(angular-query): injectMutationState use signal sandwich pattern
🎯 Changes
✅ Checklist
- [x] I have followed the steps in the Contributing guide.
- [x] I have tested this code locally with
pnpm run test:pr.
🚀 Release Impact
- [x] This change affects published code, and I have generated a changeset.
- [ ] This change is docs/CI/dev-only (no release).
Summary by CodeRabbit
Release Notes
- Refactor
- Renamed
injectMutationStateparameter frominjectMutationStateFntomutationStateFnfor improved API consistency. - Refactored internal mutation state management with optimized signal handling patterns, streamlined subscription model, and enhanced state deduplication for improved reliability.
- Renamed
🦋 Changeset detected
Latest commit: eddedf7cd52f303cb14d6d2a54c773acad6cc529
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 2 packages
| Name | Type |
|---|---|
| @tanstack/angular-query-experimental | Patch |
| @tanstack/angular-query-persist-client | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
Walkthrough
The inject-mutation-state implementation undergoes a significant refactoring to adopt a linked-state signal pattern, replacing multiple intermediate signals with a single unified approach. The public API parameter is renamed from injectMutationStateFn to mutationStateFn. Related changesets are updated to reflect this architectural change.
Changes
| Cohort / File(s) | Summary |
|---|---|
Core State Management Refactor packages/angular-query-experimental/src/inject-mutation-state.ts |
Parameter renamed from injectMutationStateFn to mutationStateFn; multiple state signals consolidated into single linkedStateSignal; subscription model switched from batched notifier/subscriber logic to direct mutationCache.subscribe(); import statements consolidated; untracked usage introduced for zone-aware updates; return value now uses computed signal with double dereference. |
Changeset Updates .changeset/inject-is-mutating-readonly.md, .changeset/tidy-parents-send.md |
Deleted patch entry for injectIsMutating readonly behavior; added new patch documentation for injectMutationState refactor adopting signal sandwich pattern. |
Sequence Diagram(s)
sequenceDiagram
participant User as User Code
participant Inject as injectMutationState()
participant Cache as mutationCache
participant Signal as linkedStateSignal
rect rgb(200, 220, 255)
Note over Inject: Initialization
Inject->>Signal: Initialize from getResult()
end
rect rgb(220, 240, 220)
Note over Cache,Signal: State Updates
Cache->>Inject: mutation event
Inject->>Signal: updateMutationState(untracked)
Signal->>Signal: replaceEqualDeep deduplicate
end
rect rgb(240, 240, 200)
Note over Inject,User: Return & Subscribe
Inject->>User: computed(linkedStateSignal()())
User->>User: Signal subscription
end
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
The refactor introduces a new architectural pattern (linked-state signal) with meaningful logic changes to state initialization, subscription registration, and derived state computation. While confined to a single file, the conceptual shift from multi-signal to unified signal-sandwich pattern and the introduction of untracked zone handling require careful verification of correctness and semantics.
Poem
🐰 A signal sandwich, stacked with care, No more three signals floating in the air! One linked state to rule them all, Deduplicated, standing tall, The mutation flows through untracked zones, Angular Query's best-dressed bones! 🥕
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Description Check | ⚠️ Warning | The PR description follows the required template structure with the 🎯 Changes, ✅ Checklist, and 🚀 Release Impact sections present. The checklist items are properly completed, indicating the contributor followed the contributing guide, tested locally, and generated an appropriate changeset. However, the critical 🎯 Changes section is completely empty—it contains only the template comment placeholder without any actual description of the changes made or their motivation, leaving reviewers without the author's explanation of what was refactored and why. | Fill in the 🎯 Changes section with a clear description of the changes made in this PR, including an explanation of how the signal sandwich pattern improves the injectMutationState implementation and any relevant motivation for this refactoring. This section should explain the key modifications such as the parameter rename, the state management refactor with signals, and any behavioral changes. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title Check | ✅ Passed | The PR title "refactor(angular-query): injectMutationState use signal sandwich pattern" is specific, clear, and directly reflects the main change in the pull request. The title uses conventional commit format and accurately summarizes that the primary change is refactoring injectMutationState to adopt a signal sandwich pattern, which is confirmed by the raw_summary showing state management refactoring with signal changes, parameter renaming, and subscription model updates. The title is concise, meaningful, and provides sufficient clarity for scanning repository history. |
| Docstring Coverage | ✅ Passed | Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] 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.
Comment @coderabbitai help to get the list of available commands and usage tips.
View your CI Pipeline Execution ↗ for commit eddedf7cd52f303cb14d6d2a54c773acad6cc529
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:sherif,test:knip,tes... |
✅ Succeeded | 2m 6s | View ↗ |
nx run-many --target=build --exclude=examples/*... |
✅ Succeeded | 8s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-10-23 20:16:39 UTC
More templates
- @tanstack/query-example-angular-auto-refetching
- @tanstack/query-example-angular-basic
- @tanstack/query-example-angular-basic-persister
- @tanstack/query-example-angular-devtools-panel
- @tanstack/query-example-angular-infinite-query-with-max-pages
- @tanstack/query-example-angular-optimistic-updates
- @tanstack/query-example-angular-pagination
- @tanstack/query-example-angular-query-options-from-a-service
- @tanstack/query-example-angular-router
- @tanstack/query-example-angular-rxjs
- @tanstack/query-example-angular-simple
- @tanstack/query-example-solid-astro
- @tanstack/query-example-solid-basic
- @tanstack/query-example-solid-basic-graphql-request
- @tanstack/query-example-solid-default-query-function
- @tanstack/query-example-solid-simple
- @tanstack/query-example-solid-start-streaming
- @tanstack/query-example-react-algolia
- @tanstack/query-example-react-auto-refetching
- @tanstack/query-example-react-basic
- @tanstack/query-example-react-basic-graphql-request
- @tanstack/query-example-chat
- @tanstack/query-example-react-default-query-function
- @tanstack/query-example-react-devtools-panel
- @tanstack/query-example-eslint-legacy
- @tanstack/query-example-react-infinite-query-with-max-pages
- @tanstack/query-example-react-load-more-infinite-scroll
- @tanstack/query-example-react-nextjs
- @tanstack/query-example-react-nextjs-app-prefetching
- @tanstack/query-example-nextjs-suspense-streaming
- @tanstack/query-example-react-offline
- @tanstack/query-example-react-optimistic-updates-cache
- @tanstack/query-example-react-optimistic-updates-ui
- @tanstack/query-example-react-pagination
- @tanstack/query-example-react-playground
- @tanstack/query-example-react-prefetching
- @tanstack/query-example-react-react-native
- @tanstack/query-example-react-router
- @tanstack/query-example-react-rick-morty
- @tanstack/query-example-react-shadow-dom
- @tanstack/query-example-react-simple
- @tanstack/query-example-react-star-wars
- @tanstack/query-example-react-suspense
- @tanstack/query-example-svelte-auto-refetching
- @tanstack/query-example-svelte-basic
- @tanstack/query-example-svelte-load-more-infinite-scroll
- @tanstack/query-example-svelte-optimistic-updates
- @tanstack/query-example-svelte-playground
- @tanstack/query-example-svelte-simple
- @tanstack/query-example-svelte-ssr
- @tanstack/query-example-svelte-star-wars
- @tanstack/query-example-vue-2.6-basic
- @tanstack/query-example-vue-2.7-basic
- @tanstack/query-example-vue-basic
- @tanstack/query-example-vue-dependent-queries
- @tanstack/query-example-vue-nuxt3
- @tanstack/query-example-vue-persister
- @tanstack/query-example-vue-simple
@tanstack/angular-query-experimental
npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9808
@tanstack/eslint-plugin-query
npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9808
@tanstack/query-async-storage-persister
npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9808
@tanstack/query-broadcast-client-experimental
npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9808
@tanstack/query-core
npm i https://pkg.pr.new/@tanstack/query-core@9808
@tanstack/query-devtools
npm i https://pkg.pr.new/@tanstack/query-devtools@9808
@tanstack/query-persist-client-core
npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9808
@tanstack/query-sync-storage-persister
npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9808
@tanstack/react-query
npm i https://pkg.pr.new/@tanstack/react-query@9808
@tanstack/react-query-devtools
npm i https://pkg.pr.new/@tanstack/react-query-devtools@9808
@tanstack/react-query-next-experimental
npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9808
@tanstack/react-query-persist-client
npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9808
@tanstack/solid-query
npm i https://pkg.pr.new/@tanstack/solid-query@9808
@tanstack/solid-query-devtools
npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9808
@tanstack/solid-query-persist-client
npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9808
@tanstack/svelte-query
npm i https://pkg.pr.new/@tanstack/svelte-query@9808
@tanstack/svelte-query-devtools
npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9808
@tanstack/svelte-query-persist-client
npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9808
@tanstack/vue-query
npm i https://pkg.pr.new/@tanstack/vue-query@9808
@tanstack/vue-query-devtools
npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9808
commit: eddedf7
Codecov Report
:white_check_mark: All modified and coverable lines are covered by tests.
:warning: Please upload report for BASE (main@907087f). Learn more about missing BASE report.
:warning: Report is 2 commits behind head on main.
Additional details and impacted files
@@ Coverage Diff @@
## main #9808 +/- ##
=======================================
Coverage ? 94.03%
=======================================
Files ? 21
Lines ? 419
Branches ? 95
=======================================
Hits ? 394
Misses ? 24
Partials ? 1
| Components | Coverage Δ | |
|---|---|---|
| @tanstack/angular-query-experimental | 93.75% <100.00%> (?) |
|
| @tanstack/eslint-plugin-query | ∅ <ø> (?) |
|
| @tanstack/query-async-storage-persister | ∅ <ø> (?) |
|
| @tanstack/query-broadcast-client-experimental | ∅ <ø> (?) |
|
| @tanstack/query-codemods | ∅ <ø> (?) |
|
| @tanstack/query-core | ∅ <ø> (?) |
|
| @tanstack/query-devtools | ∅ <ø> (?) |
|
| @tanstack/query-persist-client-core | ∅ <ø> (?) |
|
| @tanstack/query-sync-storage-persister | ∅ <ø> (?) |
|
| @tanstack/query-test-utils | ∅ <ø> (?) |
|
| @tanstack/react-query | ∅ <ø> (?) |
|
| @tanstack/react-query-devtools | ∅ <ø> (?) |
|
| @tanstack/react-query-next-experimental | ∅ <ø> (?) |
|
| @tanstack/react-query-persist-client | ∅ <ø> (?) |
|
| @tanstack/solid-query | ∅ <ø> (?) |
|
| @tanstack/solid-query-devtools | ∅ <ø> (?) |
|
| @tanstack/solid-query-persist-client | ∅ <ø> (?) |
|
| @tanstack/svelte-query | ∅ <ø> (?) |
|
| @tanstack/svelte-query-devtools | ∅ <ø> (?) |
|
| @tanstack/svelte-query-persist-client | ∅ <ø> (?) |
|
| @tanstack/vue-query | ∅ <ø> (?) |
|
| @tanstack/vue-query-devtools | ∅ <ø> (?) |
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.