test(angular-query-experimental/injectQueries): move 'effect' into 'constructor' to follow Angular convention by sukvvon · Pull Request #10537 · TanStack/query

sukvvon · 2026-04-20T17:23:19Z

🎯 Changes

Refactors the two effect() calls in inject-queries.test.ts from the class-field assignment (_ = effect(...)) pattern into an explicit constructor() body, matching the convention used in our own Angular documentation.

Before

class Page {
  result = injectQueries(() => ({ /* ... */ }))

  _ = effect(() => {
    const snapshot = this.result().map((q) => ({ data: q.data() }))
    results.push(snapshot)
  })
}

After

class Page {
  result = injectQueries(() => ({ /* ... */ }))

  constructor() {
    effect(() => {
      const snapshot = this.result().map((q) => ({ data: q.data() }))
      results.push(snapshot)
    })
  }
}

Why

The Angular official signals guide explicitly calls out the constructor as the recommended place to register an effect:

"The easiest way to satisfy this requirement is to call effect within a component, directive, or service constructor"
— Angular signals guide

The same pattern is already used in our own guide at docs/framework/angular/guides/paginated-queries.md, so moving the tests to match keeps the codebase internally consistent.

_ = effect(...) works (class-field initialization is still inside an injection context), but it leaves behind a meaningless _ identifier and diverges from the conventions shown in both the Angular docs and our own Angular guide.

Scope

Only inject-queries.test.ts is touched. inject-query.test.ts also calls effect() but wraps it in TestBed.runInInjectionContext(() => effect(...)) — that's a different pattern for injector-less tests and is out of scope here.

Verification

@tanstack/angular-query-experimental — 208 tests passed, 0 type errors
src/inject-queries.ts coverage unchanged (100% across Stmts/Branch/Funcs/Lines)

✅ 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

Tests
- Refactored test cases to improve effect initialization timing within component construction.

…onstructor' to follow Angular convention

coderabbitai · 2026-04-20T17:23:35Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 84cac471-904a-4b1e-a455-50a8ebcd27a6

📥 Commits

Reviewing files that changed from the base of the PR and between 4ae65fa and 2e728f2.

📒 Files selected for processing (1)

packages/angular-query-experimental/src/__tests__/inject-queries.test.ts

📝 Walkthrough

Walkthrough

Two test cases in the injectable queries test suite were refactored to move effect initialization from standalone class field declarations into constructor methods. The effect bodies remain functionally identical, maintaining the snapshot logic for result() and combined() signals.

Changes

Cohort / File(s)	Summary
Test Effect Initialization Refactoring `packages/angular-query-experimental/src/__tests__/inject-queries.test.ts`	Wrapped `effect(...)` calls inside `Page` component class constructors instead of standalone field declarations in two test cases, shifting effect creation timing to component construction phase.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A hop and a skip through the test code's halls,
Effects now nest in constructor calls,
The signal still shines, the snapshots align,
Refactored with care—what a hop-tastic sign! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: moving effect() calls into constructors to follow Angular conventions in the inject-queries test file.
Description check	✅ Passed	The description is comprehensive and follows the template with all required sections completed: Changes with before/after code, justification with quoted Angular guide reference, scope clarification, verification results, and both checklist items marked as complete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ 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 test/angular-query-inject-queries-effect-in-constructor

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

nx-cloud · 2026-04-20T17:23:47Z

View your CI Pipeline Execution ↗ for commit 2e728f2

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

☁️ Nx Cloud last updated this comment at 2026-04-20 17:26:15 UTC

github-actions · 2026-04-20T17:24:09Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

pkg-pr-new · 2026-04-20T17:25:02Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 2e728f2

github-actions · 2026-04-20T17:25:12Z

size-limit report 📦

Path	Size
react full	11.99 KB (0%)
react minimal	9.02 KB (0%)

…onstructor' to follow Angular convention (TanStack#10537)

test(angular-query-experimental/injectQueries): move 'effect' into 'c…

2e728f2

…onstructor' to follow Angular convention

github-actions Bot added the package: angular-query-experimental label Apr 20, 2026

sukvvon self-assigned this Apr 20, 2026

sukvvon merged commit e3ecdc5 into main Apr 20, 2026
10 checks passed

sukvvon deleted the test/angular-query-inject-queries-effect-in-constructor branch April 20, 2026 17:40

sukvvon mentioned this pull request Apr 20, 2026

test(angular-query-persist-client/withPersistQueryClient): move 'effect' into 'constructor' to follow Angular convention #10538

Merged

4 tasks

Ephem pushed a commit to Ephem/react-query that referenced this pull request Apr 23, 2026

test(angular-query-experimental/injectQueries): move 'effect' into 'c…

1dca45c

…onstructor' to follow Angular convention (TanStack#10537)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(angular-query-experimental/injectQueries): move 'effect' into 'constructor' to follow Angular convention#10537

test(angular-query-experimental/injectQueries): move 'effect' into 'constructor' to follow Angular convention#10537
sukvvon merged 1 commit intomainfrom
test/angular-query-inject-queries-effect-in-constructor

sukvvon commented Apr 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 20, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

nx-cloud Bot commented Apr 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

pkg-pr-new Bot commented Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

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

Uh oh!

🎯 Changes

Before

After

Why

Scope

Verification

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Apr 20, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented Apr 20, 2026

Uh oh!

github-actions Bot commented Apr 20, 2026

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Apr 20, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 20, 2026 •

edited

Loading

nx-cloud Bot commented Apr 20, 2026 •

edited

Loading