Angular tanstack query #2206
Open
Angular tanstack query #2206
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📝 WalkthroughWalkthroughAngular framework support was integrated into the TanStack Query plugin. This includes a new Angular runtime module, generator logic for Angular-specific hooks and context, updated build scripts and configuration, and new tests for Angular. The post-build script was also updated to handle Angular-related package aliasing. Changes
Sequence Diagram(s)sequenceDiagram
participant AngularApp as Angular App
participant AngularRuntime as angular.ts
participant QueryClient as TanStack Query Client
participant API as API Server
AngularApp->>AngularRuntime: useModelQuery(model, url, args, options)
AngularRuntime->>QueryClient: createQuery({ queryKey, queryFn, ...options })
QueryClient->>API: fetch data (via fetcher)
API-->>QueryClient: returns data
QueryClient-->>AngularRuntime: provides query result
AngularRuntime-->>AngularApp: returns query result
AngularApp->>AngularRuntime: useModelMutation(model, method, url, ...)
AngularRuntime->>QueryClient: createMutation({ mutationFn, ...options })
AngularApp->>QueryClient: mutate(args)
QueryClient->>API: send mutation request
API-->>QueryClient: returns result
QueryClient-->>AngularRuntime: provides mutation result
AngularRuntime-->>AngularApp: returns mutation result
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/plugins/tanstack-query/src/generator.ts (1)
281-304: Consider reducing code duplicationThe Angular case is identical to the React case above. Consider combining them to reduce duplication:
case 'react': - case 'vue': - // override the mutateAsync function to return the correct type - func.addVariableStatement({ - declarationKind: VariableDeclarationKind.Const, - declarations: [ - { - name: 'mutation', - initializer: `{ - ..._mutation, - mutateAsync: async <T extends ${argsType}>( - args: Prisma.SelectSubset<T, ${argsType}>, - options?: ${optionsType} - ) => { - return (await _mutation.mutateAsync( - args, - options as any - )) as ${returnType}; - }, - }`, - }, - ], - }); - break; - - case 'svelte': - // svelte-query returns a store for mutations - // here we override the mutateAsync function to return the correct type - // and call `derived` to return a new reactive store - func.addVariableStatement({ - declarationKind: VariableDeclarationKind.Const, - declarations: [ - { - name: 'mutation', - initializer: `derived(_mutation, value => ({ - ...value, - mutateAsync: async <T extends ${argsType}>( - args: Prisma.SelectSubset<T, ${argsType}>, - options?: ${optionsType} - ) => { - return (await value.mutateAsync( - args, - options as any - )) as ${returnType}; - }, - }))`, - }, - ], - }); - break; - case 'angular': - // Angular uses injectMutation which returns the mutation object directly - // override the mutateAsync function to return the correct type + case 'vue': + // override the mutateAsync function to return the correct type func.addVariableStatement({ declarationKind: VariableDeclarationKind.Const, declarations: [
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/plugins/tanstack-query/package.jsonis excluded by!**/*.jsonpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!**/*.yaml
📒 Files selected for processing (5)
packages/plugins/tanstack-query/scripts/postbuild.js(1 hunks)packages/plugins/tanstack-query/src/generator.ts(8 hunks)packages/plugins/tanstack-query/src/runtime-v5/angular.ts(1 hunks)packages/plugins/tanstack-query/tests/plugin.test.ts(1 hunks)packages/plugins/tanstack-query/tsup-v5.config.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
packages/plugins/tanstack-query/src/generator.ts (7)
packages/sdk/src/types.ts (1)
PluginError(115-119)packages/schema/src/plugins/zod/index.ts (1)
name(5-5)packages/schema/src/plugins/prisma/index.ts (1)
name(19-19)packages/schema/src/plugins/enhancer/index.ts (1)
name(15-15)packages/plugins/openapi/src/index.ts (1)
name(5-5)packages/plugins/trpc/src/index.ts (1)
name(4-4)packages/plugins/tanstack-query/src/index.ts (1)
name(4-4)
packages/plugins/tanstack-query/tests/plugin.test.ts (1)
packages/testtools/src/schema.ts (2)
loadSchema(173-249)normalizePath(73-75)
packages/plugins/tanstack-query/src/runtime-v5/angular.ts (1)
packages/plugins/tanstack-query/src/runtime/common.ts (4)
DEFAULT_QUERY_ENDPOINT(15-15)marshal(213-220)setupInvalidation(254-275)setupOptimisticUpdate(333-377)
🔇 Additional comments (10)
packages/plugins/tanstack-query/tsup-v5.config.ts (1)
4-4: LGTM!The Angular runtime entry point is correctly added following the same pattern as other frameworks.
packages/plugins/tanstack-query/scripts/postbuild.js (1)
49-54: Angular package uses experimental versionThe implementation correctly follows the established pattern. Note that Angular replaces with
@tanstack/angular-query-experimentalwhile other frameworks use stable package names, indicating Angular support may be experimental.packages/plugins/tanstack-query/tests/plugin.test.ts (1)
346-346: Angular version is up-to-date and validThe test’s
'^20.0.0'constraint aligns with the current stable Angular release (v20.1.3 as of July 23, 2025). No changes are needed.packages/plugins/tanstack-query/src/generator.ts (2)
44-47: Good validation for Angular version constraintThe check ensures Angular is only supported with v5, which aligns with the fact that Angular support appears to be experimental and only available in TanStack Query v5.
630-632: LGTM!Angular context exports follow the established pattern for other frameworks.
packages/plugins/tanstack-query/src/runtime-v5/angular.ts (5)
1-1: LGTM!Appropriate ESLint directive for a runtime module that handles dynamic types.
32-58: Well-implemented Angular context managementThe implementation correctly uses Angular's dependency injection with:
- Proper InjectionToken declaration
- Provider function following Angular patterns
- Safe optional injection with sensible defaults
- Correct context destructuring and spreading
70-90: LGTM!The query hook correctly integrates Angular's
injectQuerywith the common query logic.
102-124: LGTM!The infinite query hook properly handles pagination and follows the established pattern.
138-207: Comprehensive mutation implementationThe mutation hook is well-implemented with:
- Proper request method handling
- Correct use of Angular's QueryClient injection
- Support for both query invalidation and optimistic updates
- Appropriate cancellation of in-flight queries to prevent race conditions
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Second try (before I did not branch from dev ...)
Heyho, pretty new to the open-source world.
As I use Angular and NestJS in my tech stack and found this interesting library I was pretty sad that the plugin does not work with Angular, so I created an implementation.
Sadly, I can't get the test running on my system. (even without any changes to the code) (It searches the package.json in a very wrong directory. I don't know why, and I didn't want to change anything on the setup/config files.)