Help us improve
Share bugs, ideas, or general feedback.
From role-fullstack
Integrates backend APIs with frontend apps using type-safe patterns: tRPC for E2E type safety, OpenAPI codegen (openapi-typescript, orval), TanStack Query/SWR for data fetching, optimistic updates, error handling.
npx claudepluginhub rnavarych/alpha-engineer --plugin role-fullstackHow this skill is triggered — by the user, by Claude, or both
Slash command
/role-fullstack:api-frontend-integrationThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Activate when connecting a backend API to a frontend application, setting up data-fetching patterns, implementing optimistic updates, or establishing type-safe API contracts.
Integrates tRPC with TanStack Query for type-safe queries, mutations, optimistic updates, and cache invalidation in React apps using api.xxx.useQuery/useMutation.
Guides frontend-to-backend API integration: typed clients, auth refresh, error mapping, upload flows, SSE/WebSocket/polling, and cross-boundary loading/error states.
Builds end-to-end type-safe tRPC APIs with routers, procedures, middleware, subscriptions, and Next.js/React integration for TypeScript full-stack apps.
Share bugs, ideas, or general feedback.
Activate when connecting a backend API to a frontend application, setting up data-fetching patterns, implementing optimistic updates, or establishing type-safe API contracts.
| Approach | Type Safety | Setup Cost | Best For |
|---|---|---|---|
| tRPC | Full E2E | Low | Monorepos, same-team ownership |
| OpenAPI codegen | Generated | Medium | REST APIs, multi-team |
| GraphQL + codegen | Generated | Medium | Complex relational data queries |
| Manual fetch + Zod | Runtime | Low | Simple APIs, third-party services |
packages/api/src/routers/ with input validation via Zod.AppRouter type -- never the runtime object -- to the frontend.httpBatchLink or httpSubscriptionLink.trpc.Provider and QueryClientProvider.trpc.useQuery() and trpc.useMutation() -- types flow automatically.openapi-fetch for typed fetch calls."codegen": "orval --config orval.config.ts".// Query with proper typing, stale time, and error handling
const { data, isLoading, error } = useQuery({
queryKey: ['users', filters],
queryFn: () => api.users.list(filters),
staleTime: 5 * 60 * 1000,
retry: 3,
retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 10000),
});
onMutate to snapshot previous data and apply the optimistic change.onError to rollback to the snapshot on failure.onSettled to invalidate queries and refetch the authoritative state.{ code, message, details? }). Parse with Zod on the client.useEffect without cancellation -- always use TanStack Query or SWR.data -- always handle the error path.