integration-patterns

Implement end-to-end TanStack Start integration patterns for SSR data flows, routing, and authentication.

1|Updated Jan 22, 2026
One-click install
npx skills add https://github.com/oakoss/open-saas-kit --skill integration-patterns-oakoss
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integration-patterns
Source: https://github.com/oakoss/open-saas-kit/tree/main/.claude/skills/integration-patterns
Command: npx skills add https://github.com/oakoss/open-saas-kit --skill integration-patterns-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured patterns and best practices to implement end-to-end TanStack Start flows across SSR apps, reducing boilerplate and guiding teams toward consistent implementations.

Core Features & Use Cases

  • End-to-end flows: Patterns spanning routing, data fetching, mutations, and authorization.
  • SSR-ready patterns: Loader, caching, and suspense-based data availability for server-rendered pages.
  • Common flows: Suspense Query + Loader, Form → Server → Query, Infinite List, Paginated Table, Auth → Protected Route, and Error Handling.

Quick Start

Consult this Skill to reference ready-to-copy patterns for building full-stack features in TanStack Start projects.

Frequently Asked Questions about integration-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement SSR-ready data fetching with route loaders in TanStack Start?

SSR-ready data fetching in TanStack Start uses structured route loaders combined with suspense queries to ensure data is available during server-side rendering. This pattern reduces boilerplate by providing consistent loader implementations.

What is the best way to handle server mutations and form submissions in TanStack Start?

Handling server mutations in TanStack Start follows a Form to Server to Query pattern using server functions for data updates and cache invalidation. This approach provides structured end-to-end flows for form handling and data synchronization.

How do I set up protected routes and authentication flows in a TanStack Start SSR app?

Protected routes and authentication in TanStack Start use a structured Auth to Protected Route pattern spanning routing and authorization. This approach integrates with server-side rendering to secure application endpoints consistently.

Can I use suspense and error boundaries for paginated data in TanStack Start?

Yes, TanStack Start supports suspense and error boundaries for paginated data through dedicated Infinite List and Paginated Table patterns. These patterns manage cache invalidation and error handling across complex data fetching flows.

Why does my TanStack Start server function fail to invalidate the query cache after a mutation?

Server function cache invalidation failures in TanStack Start often stem from missing structured mutation patterns that link server responses to query caches. Applying the Form to Server to Query pattern ensures consistent cache invalidation across flows.

Do I need error boundaries for every route loader in a TanStack Start SSR application?

Error boundaries are recommended for route loaders in TanStack Start SSR applications to gracefully handle data fetching failures. Structured error handling patterns ensure that failures in loaders do not break the entire server-rendered page.