@trpc/tanstack-angular-query

> tRPC Angular Query integration for type-safe API calls with Angular

Installation

``bash
npm install @trpc/client @trpc/server @tanstack/angular-query-experimental tanstack-angular-query
`

Usage

$3

First, create your tRPC client:

`typescript
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "./server"; // Import your router type

const trpc = createTRPCClient({
links: [
httpBatchLink({
url: "/api/trpc",
}),
],
});
`

$3

In your main.ts or app config:

`typescript
import { bootstrapApplication } from "@angular/platform-browser";
import { provideAngularQuery, QueryClient } from "@tanstack/angular-query-experimental";
import { provideTRPC } from "tanstack-angular-query";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
providers: [
provideAngularQuery(new QueryClient()),
provideTRPC(trpc),
// ... other providers
],
});
`

$3

`typescript
import { Component, inject } from "@angular/core";
import { injectTRPC } from "tanstack-angular-query";
import { injectQuery } from "@tanstack/angular-query-experimental";

@Component({
selector: "app-example",
template:

query = injectQuery(this.trpc.hello.queryOptions({ text: "World" }));
}
`

$3

`typescript
import { Component, inject } from "@angular/core";
import { injectTRPC } from "tanstack-angular-query";
import { injectMutation } from "@tanstack/angular-query-experimental";

@Component({
selector: "app-mutation-example",
template:

{{ mutation.isPending() ? "Creating..." : "Create Post" }}

,
})
export class MutationExampleComponent {
private trpc = injectTRPC();

mutation = injectMutation(this.trpc.createPost.mutationOptions());
}
`

$3

`typescript
import { Component, inject } from "@angular/core";
import { injectTRPC } from "tanstack-angular-query";
import { injectInfiniteQuery } from "@tanstack/angular-query-experimental";

@Component({
selector: "app-infinite-example",
template:

infiniteQuery = injectInfiniteQuery(
this.trpc.posts.infiniteQueryOptions({
limit: 10,
initialCursor: null,
getNextPageParam: (lastPage) => lastPage.nextCursor,
}),
);
}
`

$3

`typescript
import { Component, inject } from "@angular/core";
import { injectTRPC, injectTRPCSubscription } from "tanstack-angular-query";

@Component({
selector: "app-subscription-example",
template:

subscription = injectTRPCSubscription(this.trpc.messages.subscriptionOptions({ channel: "general" }));
}
``

API Reference

$3

Sets up tRPC with Angular Query integration.

$3

Returns the tRPC proxy with query, mutation, and subscription options.

$3

Returns the raw tRPC client instance.

$3

Hook for handling tRPC subscriptions with reactive state.

$3

Creates typed injection functions for a specific router type.

Features

- 🔧 Type Safety: Full TypeScript support with automatic type inference
- 📡 Reactive: Built on Angular signals for reactive state management
- 🔄 Caching: Leverages TanStack Query's powerful caching capabilities
- 🎯 Optimistic Updates: Support for optimistic updates and mutations
- 📊 Infinite Queries: Built-in support for infinite/paginated queries
- 🔌 Subscriptions: Real-time subscriptions with automatic cleanup
- 🎨 Angular Native: Designed specifically for Angular with proper DI integration

License

MIT