Skip to content

feat(trpc): migrate to tRPC v11 with improved type inference - #1826

Closed
benpsnyder wants to merge 2 commits into
analogjs:alphafrom
benpsnyder:feat/trpc-v11-upgrade
Closed

benpsnyder wants to merge 2 commits into
analogjs:alphafrom
benpsnyder:feat/trpc-v11-upgrade

Conversation

@benpsnyder

@benpsnyder benpsnyder commented Aug 3, 2025 •

Copy link
Copy Markdown
Contributor

Summary

This PR migrates the @analogjs/trpc package to tRPC v11, implementing a robust type inference system based on the successful ngx-trpc approach. The migration ensures full TypeScript support and proper type checking for tRPC clients in Angular applications.

Support tRPC 11 #1676

Changes

🔄 Migration to tRPC v11

  • Updated all tRPC dependencies from v10 to v11
  • Followed migration guide tRPC - Migrate from v10 to v11
  • Updated package.json peer dependencies to require tRPC v11

🛠️ Type System Improvements

  • Implemented tRPC v11 type inference using @trpc/server/unstable-core-do-not-import
  • Fixed CreateTrpcProxyClient type to properly infer router procedures
  • Updated ProcedureOptions to ProcedureCallOptions<unknown> per tRPC v11 API changes
  • Added proper type definitions for:
    • ResolverDef
    • Resolver
    • DecorateProcedure
    • DecoratedProcedureRecord
    • inferRouterClient

🔧 Implementation Details

  • Imported createFlatProxy and createRecursiveProxy from tRPC's unstable core
  • Maintained backward compatibility with the existing API surface
  • Preserved RxJS Observable integration for Angular compatibility
  • Added transformer link support for data serialization

✅ Testing

  • Successfully tested with nx run trpc-app:build:production
  • All TypeScript type checking passes without errors
  • tRPC client properly infers router types in Angular components

Breaking Changes

⚠️ This is a breaking change - Applications using @analogjs/trpc must upgrade to tRPC v11.

Dependencies Update

Applications must update their tRPC dependencies:

{
  "dependencies": {
    "@trpc/client": "^11.0.0",
    "@trpc/server": "^11.0.0"
  }
}

Why This Belongs in Alpha Release

This migration to tRPC v11 represents a significant breaking change that requires careful testing and validation before a stable release. The alpha release provides the perfect opportunity to:

  1. Validate Type System Changes: The enhanced type inference system needs real-world testing to ensure it works correctly across different Angular applications and tRPC router configurations.

  2. Test Migration Path: Users need time to test the migration from tRPC v10 to v11, identify potential issues, and provide feedback on the migration experience.

  3. Dependency Compatibility: tRPC v11 is relatively new and may have compatibility issues with other packages in the Angular ecosystem that we haven't discovered yet.

  4. API Stability: The internal type system changes (ProcedureOptions → ProcedureCallOptions<unknown>) need validation to ensure they don't break existing applications.

  5. Community Feedback: Alpha releases allow the community to test the changes and provide feedback before the breaking changes are locked into a stable release.

Breaking Changes Summary

  • Dependency Update: Applications must upgrade to tRPC v11 (@trpc/client and @trpc/server v11+)
  • Type System: Enhanced type inference may expose existing type issues in applications
  • Internal APIs: Internal type definitions have been updated to match tRPC v11's architecture

Migration Guide

Users should follow the migration guide in packages/trpc/MIGRATION-v11.md which covers:

  • Updating dependencies
  • Potential code changes needed
  • Common migration issues and solutions

Example Usage

// Client setup remains the same
export const { provideTrpcClient, TrpcClient } = createTrpcClient<AppRouter>({
  url: '/api/trpc',
  transformer: superjson,
});

// Type inference now works correctly
const client = inject(TrpcClient);
const notes = await client.note.list.query(); // ✅ Fully typed

References

  • Based on the ngx-trpc implementation approach
  • Follows tRPC v11 migration patterns
  • Maintains Angular and RxJS best practices

Checklist

  • Code compiles without errors
  • All tests pass
  • Migration guide added
  • Breaking changes documented
  • Example app updated and working
image

@netlify

netlify Bot commented Aug 3, 2025 •

Copy link
Copy Markdown

✅ Deploy Preview for analog-docs ready!

Name Link
🔨 Latest commit 5cd0c62
🔍 Latest deploy log https://app.netlify.com/projects/analog-docs/deploys/688eed2383344d0008b0faf6
😎 Deploy Preview https://deploy-preview-1826--analog-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 3, 2025 •

Copy link
Copy Markdown

✅ Deploy Preview for analog-ng-app ready!

Name Link
🔨 Latest commit 5cd0c62
🔍 Latest deploy log https://app.netlify.com/projects/analog-ng-app/deploys/688eed238ac37d00086a21f0
😎 Deploy Preview https://deploy-preview-1826--analog-ng-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 3, 2025 •

Copy link
Copy Markdown

✅ Deploy Preview for analog-app ready!

Name Link
🔨 Latest commit 5cd0c62
🔍 Latest deploy log https://app.netlify.com/projects/analog-app/deploys/688eed23dc0bee00082ebae7
😎 Deploy Preview https://deploy-preview-1826--analog-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 3, 2025 •

Copy link
Copy Markdown

✅ Deploy Preview for analog-blog ready!

Name Link
🔨 Latest commit a0398fd
🔍 Latest deploy log https://app.netlify.com/projects/analog-blog/deploys/68a0a495f733d300084c2a0a
😎 Deploy Preview https://deploy-preview-1826--analog-blog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@benpsnyder benpsnyder mentioned this pull request Aug 3, 2025
2 tasks
@benpsnyder
benpsnyder changed the base branch from beta to alpha August 4, 2025 15:22
@benpsnyder

Copy link
Copy Markdown
Contributor Author

@brandonroberts retargeted to alpha because of major upgrade and so we can be more sure about stability. Updated BREAKING CHANGES section of PR description.

@brandonroberts

Copy link
Copy Markdown
Member

The tRPC changes look good but there are too many other changes included in this PR. Let's keep it isolated to tRPC updates.

@benpsnyder

Copy link
Copy Markdown
Contributor Author

The tRPC changes look good but there are too many other changes included in this PR. Let's keep it isolated to tRPC updates.

@brandonroberts reduced it; ready to merge

Comment thread package.json Outdated
Comment thread packages/trpc/README.md Outdated
@benpsnyder

Copy link
Copy Markdown
Contributor Author

This PR is being closed and accelerated into this fork: ESM Transition Plan for AnalogJS v2.0.0-alpha #1844 | 📢⚠️ Fork Alert (for battle testing)

@benpsnyder benpsnyder closed this Aug 19, 2025

This branch was successfully deployed

1 active deployment
Preview — a0398fdd Deployed Aug 16, 2025 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants