Angular HttpClient link for tRPC
npm install @heddendorp/trpc-link-angularAngular HttpClient link for tRPC client that provides seamless integration with Angular's HTTP services.
``bash`
npm install @heddendorp/trpc-link-angular
This package requires the following peer dependencies:
- @angular/common >=16.0.0@angular/core >=16.0.0
- @trpc/client 11.4.3
- @trpc/server 11.4.3
- rxjs >=7.0.0
- typescript >=5.7.2
-
`typescript
import { HttpClient } from "@angular/common/http";
import { Injectable, inject } from "@angular/core";
import { createTRPCClient } from "@trpc/client";
import { angularHttpLink } from "@heddendorp/trpc-link-angular";
import type { AppRouter } from "../server/router";
@Injectable({
providedIn: "root",
})
export class TrpcService {
private httpClient = inject(HttpClient);
client = createTRPCClient
links: [
angularHttpLink({
url: "http://localhost:3000/trpc",
httpClient: this.httpClient,
}),
],
});
}
`
`typescript
import { HttpClient } from "@angular/common/http";
import { Injectable, inject } from "@angular/core";
import { createTRPCClient } from "@trpc/client";
import { angularHttpLink } from "@heddendorp/trpc-link-angular";
import superjson from "superjson";
import type { AppRouter } from "../server/router";
@Injectable({
providedIn: "root",
})
export class TrpcWithTransformerService {
private httpClient = inject(HttpClient);
client = createTRPCClient
links: [
angularHttpLink({
url: "http://localhost:3000/trpc",
httpClient: this.httpClient,
transformer: superjson, // SuperJSON transformer for Date objects, etc.
}),
],
});
}
`
`typescript
import { HttpClient } from "@angular/common/http";
import { Injectable, inject } from "@angular/core";
import { createTRPCClient } from "@trpc/client";
import { angularHttpLink } from "@heddendorp/trpc-link-angular";
import type { AppRouter } from "../server/router";
@Injectable({
providedIn: "root",
})
export class TrpcWithCustomTransformerService {
private httpClient = inject(HttpClient);
client = createTRPCClient
links: [
angularHttpLink({
url: "http://localhost:3000/trpc",
httpClient: this.httpClient,
transformer: {
serialize: (data) => JSON.stringify(data),
deserialize: (data) => JSON.parse(data),
},
}),
],
});
}
`
`typescript
import { HttpClient } from "@angular/common/http";
import { Injectable, inject } from "@angular/core";
import { createTRPCClient } from "@trpc/client";
import { angularHttpLink } from "@heddendorp/trpc-link-angular";
import type { AppRouter } from "../server/router";
@Injectable({
providedIn: "root",
})
export class TrpcWithAuthService {
private httpClient = inject(HttpClient);
client = createTRPCClient
links: [
angularHttpLink({
url: "http://localhost:3000/trpc",
httpClient: this.httpClient,
headers: () => ({
authorization: Bearer ${localStorage.getItem("token")},`
}),
}),
],
});
}
`typescript
import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Injectable, inject } from "@angular/core";
import { createTRPCClient } from "@trpc/client";
import { angularHttpLink } from "@heddendorp/trpc-link-angular";
import type { AppRouter } from "../server/router";
@Injectable({
providedIn: "root",
})
export class TrpcWithErrorHandlingService {
private httpClient = inject(HttpClient);
client = createTRPCClient
links: [
angularHttpLink({
url: "http://localhost:3000/trpc",
httpClient: this.httpClient,
onError: (error: HttpErrorResponse) => {
console.error("tRPC Error:", error);
// Handle error globally
},
}),
],
});
}
`
Creates a tRPC link that uses Angular's HttpClient for HTTP requests.
#### Options
- url: string - The tRPC server URLhttpClient: HttpClient
- - Angular HttpClient instanceheaders?: () => Record
- - Function that returns headerstransformer?: DataTransformerOptions
- - Data transformer (e.g., SuperJSON)onError?: (error: HttpErrorResponse) => void
- - Error handler function
- Angular HttpClient Integration: Uses Angular's HttpClient for all HTTP requests
- HTTP Interceptors Support: Automatically works with Angular HTTP interceptors
- Error Handling: Proper error handling with HttpErrorResponse
- Data Transformers: Full support for SuperJSON and custom transformers
- TypeScript Support: Full TypeScript support with type inference
- Observable Integration: Seamless integration with Angular's Observable patterns
If you're migrating from the standard tRPC httpLink:
`typescript
// Before
import { httpLink } from "@trpc/client";
const client = createTRPCClient
links: [
httpLink({
url: "http://localhost:3000/trpc",
}),
],
});
// After
import { angularHttpLink } from "@heddendorp/trpc-link-angular";
const client = createTRPCClient
links: [
angularHttpLink({
url: "http://localhost:3000/trpc",
httpClient: this.httpClient,
}),
],
});
`
To build the library:
`bash`
ng build trpc-link-angular
To run tests:
`bash``
ng test trpc-link-angular
Please see the Maintenance Guide for information on contributing to this project.