TanStack Types

Provide type-safe TanStack Query guidance for TypeScript projects with Zod runtime validation.

7|2|Updated Jan 9, 2026

Search Tags:#typescript #tanstack #zod #types #react-query #runtime-validation #query-options

Ready to run

npx skills add https://github.com/salmanrrana/brain-dump --skill tanstack-types

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: TanStack Types
Source: https://github.com/salmanrrana/brain-dump/tree/main/.opencode/skill/tanstack-types
Command: npx skills add https://github.com/salmanrrana/brain-dump --skill tanstack-types

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

TanStack Query helps fetch and cache data, but achieving end-to-end type safety requires patterns that propagate types from the data source to UI. This skill provides type-safe TanStack Query practices in TypeScript, including typing queryFn data, avoiding useQuery generic misuse, and validating runtime data with Zod.

Core Features & Use Cases

Type the data source via queryFn return types to ensure data shape flows automatically to the UI.
Use the queryOptions helper to enforce compile-time type safety for keys, options, and cache interactions.
Validate API responses at runtime with Zod schemas to catch mismatches and surface descriptive errors.
Build reusable, type-safe query factories and typed selectors for scalable data fetching patterns.

Quick Start

Ask me for a typed TanStack Query example using queryOptions and a Zod schema to validate responses.

Frequently Asked Questions about TanStack Types

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

FAQPage Schema

How do I achieve type safety in TanStack Query for TypeScript projects?▼

Type safety in TanStack Query is achieved by typing queryFn return types, using the queryOptions helper for compile-time keys, and validating runtime data with Zod schemas. This propagates types from data sources to UI.

How do I use Zod for runtime validation with React Query?▼

Zod runtime validation with React Query validates API responses at runtime to catch type mismatches. You parse queryFn results through Zod schemas, surfacing descriptive errors instead of throwing exceptions.

What is the queryOptions helper in TanStack Query?▼

The queryOptions helper in TanStack Query enforces compile-time type safety for query keys, options, and cache interactions. It builds reusable, type-safe query factories for scalable data fetching patterns.

How do I avoid useQuery generic misuse in TypeScript?▼

Avoid useQuery generic misuse by typing the data source via queryFn return types. This lets data shape flow automatically to the UI, eliminating manual generic parameters and reducing type errors.

Can I build type-safe query factories with TanStack Query?▼

Type-safe query factories with TanStack Query are built using the queryOptions helper and discriminated unions. They enforce typed query data and cache interactions across scalable React applications.

Does TanStack Query work with zero-throw runtime validation?▼

TanStack Query supports zero-throw runtime validation by integrating Zod schemas. This approach catches API response mismatches and surfaces descriptive errors without interrupting application flow.