Angular tanstack query #2206
Angular tanstack query #2206
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (2)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 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: useInfiniteModelQuery(model, url, args, options)
AngularRuntime->>QueryClient: createInfiniteQuery({ queryKey, queryFn, ...options })
QueryClient->>API: fetch paged data (via fetcher)
API-->>QueryClient: returns paged data
QueryClient-->>AngularRuntime: provides infinite query result
AngularRuntime-->>AngularApp: returns infinite 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 ✨ 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
There was a problem hiding this comment.
Hi @ScriptType ,
Thanks for making this PR! I've never used Angular or tanstack-angular-query, but the change looks very good to me. Please check the one comment I added when you have time.
I'll merge it with the dev branch where I made a few fixes related to the observed test failures. If the issues are resolved, I'll approve the PR and get it merged.
Will you be interested in adding documentation for it too?
|
Removed the Peer-Dependencie. Is there anything else I can help you with inside the project? |
Awesome! Yes, docs are in a separate repo here: I think simply mirroring current content about react/vue would be sufficient. I can help with some touchup if needed. Thanks! @ScriptType |
ymc9
left a comment
ymc9
left a comment
There was a problem hiding this comment.
I'll merge this PR once the CI passes.
2 participants
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.)