query icon indicating copy to clipboard operation
query copied to clipboard

refactor(angular-query): injectMutationState use signal sandwich pattern

Open arnoud-dv opened this issue 1 month ago • 5 comments

🎯 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 injectMutationState parameter from injectMutationStateFn to mutationStateFn for improved API consistency.
    • Refactored internal mutation state management with optimized signal handling patterns, streamlined subscription model, and enhanced state deduplication for improved reliability.

arnoud-dv avatar Oct 23 '25 20:10 arnoud-dv

🦋 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

changeset-bot[bot] avatar Oct 23 '25 20:10 changeset-bot[bot]

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.

❤️ Share

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

coderabbitai[bot] avatar Oct 23 '25 20:10 coderabbitai[bot]

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

nx-cloud[bot] avatar Oct 23 '25 20:10 nx-cloud[bot]

More templates

@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

pkg-pr-new[bot] avatar Oct 23 '25 20:10 pkg-pr-new[bot]

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

Impacted file tree graph

@@           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.

codecov[bot] avatar Oct 23 '25 20:10 codecov[bot]