feat/bugfix: fixing-import-fixing-reactivity

[ScriptType]

Problem

Angular has a unique initialization timing issue where component inputs (route params, etc.) are not available during class initialization. This causes runtime errors when query hooks try to access these values immediately:

// ❌ Runtime Error: NG0950 - Input "id" required but no value available
export class TestDetailPage {
  id = input.required({ transform: numberAttribute }); // From route
  
  findUniquePostQuery = useFindUniquePost({
    where: { id: this.id() } // ❌ id() not available yet
  });
}

Additionally, even when we remove the required which "fixes" the error because undefined is then expected, the query doesn't react to changes since the args were evaluated only once at initialization.
(This does also apply to normal angular signals )

Solution

Allow query args to be passed as a function for Angular target, enabling deferred evaluation and reactivity:

export class TestDetailPage {
  //Deferred evaluation + reactive to input/signal changes
  id = input.required({ transform: numberAttribute });
  
  findUniquePostQuery = useFindUniquePost(() => ({
    where: { id: this.id() }
  }));
}

what also works with this changes

export class TestDetailPage {
  id = input.required({ transform: numberAttribute });
  
    findUniquePostArgs = computed(() => {
    const id = this.id();
    return { where: { id } };
  });

  findUniquePostQuery = useFindUniquePost(this.findUniquePostArgs);

Changes

Modified generateQueryHook to accept args | (() => args) for Angular target
Modified useModelQuery to resolve the args inside the injectQuery for reactivity.
Modified useInfiniteModelQuery to resolve the args inside the injectQuery for reactivity.
Updated Angular imports to use @tanstack/angular-query-experimental
Maintains backward compatibility for other frameworks
No breaking changes

Solves both timing issues and enables full reactivity with Angular signals.
Also aligns now more with
https://tanstack.com/query/latest/docs/framework/angular/examples/router

Other Changes

Fixed makeBaseImports for target Angular

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates the Angular TanStack Query integration: generator now allows args as a value or function for Angular and switches Angular imports to the experimental package. Runtime hooks resolve args that may be functions, refactor query construction to return injected query objects, and adjust return typing by relying on inference.

Changes

Cohort / File(s)	Summary
Angular generator updates packages/plugins/tanstack-query/src/generator.ts	Compute inputType as mutable; for Angular, broaden to union of type or () => type. Update Angular imports from '@tanstack/angular-query-v5' to '@tanstack/angular-query-experimental'.
Angular runtime hooks packages/plugins/tanstack-query/src/runtime-v5/angular.ts	Add dynamic-args handling via isFn; resolve args before computing queryKey/URL. Refactor useModelQuery/useInfiniteModelQuery to return injected query objects. Remove explicit CreateInfiniteQueryResult/QueryKey usage and rely on inferred return types.

Sequence Diagram(s)

sequenceDiagram
  participant C as Component
  participant H as useModelQuery
  participant Q as injectQuery

  C->>H: call(args | () => args)
  H->>H: resolve args (isFn ? args() : args)
  H->>H: build queryKey and reqUrl from resolvedArgs
  H->>Q: injectQuery({ queryKey, queryFn })
  Q-->>H: QueryObject
  H-->>C: QueryObject

Loading

sequenceDiagram
  participant C as Component
  participant H as useInfiniteModelQuery
  participant IQ as injectInfiniteQuery

  C->>H: call(args | () => args)
  H->>H: resolve args
  H->>H: build infinite queryKey and page URL from resolvedArgs
  H->>IQ: injectInfiniteQuery({ initialPageParam: resolvedArgs, queryFn })
  IQ-->>H: InfiniteQueryObject
  H-->>C: InfiniteQueryObject

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Possibly related PRs

• Angular tanstack query #2206: Also modifies Angular TanStack Query integration in generator and runtime files, aligning imports and hook behavior.
• merge dev to main (v2.18.0) #2219: Follow-up adjusting Angular experimental imports and refining dynamic-argument handling in the same areas.
• fix(tanstack): infinite query typing issues #1480: Changes generateQueryHook argument typing/handling similar to this PR’s generator adjustments.

Note

🔌 MCP (Model Context Protocol) integration is now available in Early Access!

Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d8a90cd and 9bbac1d.

📒 Files selected for processing (2)

• packages/plugins/tanstack-query/src/generator.ts (2 hunks)
• packages/plugins/tanstack-query/src/runtime-v5/angular.ts (3 hunks)

🔇 Additional comments (5)

packages/plugins/tanstack-query/src/generator.ts (2)

120-123: LGTM! Angular dynamic args support implemented correctly.

The change from const to let and the union type addition for Angular enables the deferred evaluation pattern mentioned in the PR objectives. This solves the Angular-specific timing issue where component inputs (like route params) aren't available during class initialization.

---

679-679: Verify stability of experimental package usage.

The switch to @tanstack/angular-query-experimental aligns with the runtime implementation, but using experimental packages in production could introduce stability concerns.

Ensure that the experimental package is stable enough for production use or document this dependency clearly for users.

packages/plugins/tanstack-query/src/runtime-v5/angular.ts (3)

30-31: LGTM! Clean helper implementation for function detection.

The AnyFn type and isFn helper provide a clean way to detect function arguments. The implementation is standard and the helpers are appropriately kept internal.

---

78-92: Excellent implementation of reactive args support.

The restructure enables proper reactivity by moving args resolution inside the injectQuery callback. This ensures that when args is a function (like a computed signal), it gets re-evaluated when dependencies change. The consistent use of resolvedArgs throughout maintains correctness.

---

114-130: LGTM! Consistent reactive implementation for infinite queries.

The implementation mirrors the approach used in useModelQuery, providing the same reactive benefits for infinite queries. Using resolvedArgs for both queryKey and initialPageParam maintains consistency, and the pageParam ?? resolvedArgs fallback preserves backward compatibility.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• 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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

‼️ IMPORTANT
Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.