React Query Hook Generator
Generate TanStack Query (React Query) hooks for data fetching with TypeScript support
About this ToolHow it works, benefits & use casesTap to collapse
TanStack Query (React Query) hooks follow predictable shapes — a useQuery for reads, a useMutation with cache invalidation for writes, and a useInfiniteQuery with getNextPageParam for pagination — but typing them and wiring the fetch function correctly is repetitive. This generator produces a ready-to-edit hook from two inputs. Name your hook (it prefixes "use" automatically if you leave it off) and choose a query type: Query for data fetching, Mutation for create/update/delete, or Infinite Query for infinite scroll and pagination. The output includes a typed fetch function, the hook itself with a sensible queryKey, and the right defaults for each type — staleTime on queries, an onSuccess that calls invalidateQueries on mutations, and getNextPageParam plus initialPageParam on infinite queries. A live preview shows the generated filename as you type, and usage examples are appended as comments. Toggle TypeScript types on or off. Everything runs in your browser.
How to Use
- 1Type a name in the "Hook Name" field (for example useUsers) — if you omit the "use" prefix it is added for you.
- 2Pick a "Query Type": Query (fetch data), Mutation (create / update / delete), or Infinite Query (pagination / infinite scroll).
- 3Toggle "Include TypeScript types" on or off depending on your project.
- 4Watch the live preview line confirm the output filename, then click "Generate Hook".
- 5Copy or download the generated hook file (named <hookName>.ts or .js) and adjust the fetch URL and types to your API.
Key Benefits
- Generates query, mutation, or infinite-query hooks with the correct TanStack Query API for each
- Auto-prefixes the hook name with "use" so it follows the Rules of Hooks
- Queries include a stable queryKey and a 5-minute staleTime default
- Mutations come with useQueryClient and an onSuccess that invalidates the related query key
- Infinite queries include getNextPageParam and initialPageParam ready for paginated APIs
- Optional TypeScript result types (UseQueryResult, UseMutationResult, UseInfiniteQueryResult)
- Inline usage comments and an in-browser live filename preview
Common Use Cases
- Scaffolding a data-fetching hook for a REST endpoint with sensible caching
- Creating a mutation hook that invalidates and refetches a list after a write
- Setting up an infinite-scroll feed with a cursor- or page-based API
- Standardizing query key and stale-time conventions across a codebase
- Learning the difference between useQuery, useMutation, and useInfiniteQuery
Query Configuration
Name will be prefixed with 'use' if missing
Live preview: useUsers.ts
Run to see the generated TanStack Query hook.
React Query Tips
- Use queries for GET requests and data fetching
- Use mutations for POST, PUT, DELETE operations
- Infinite queries are perfect for pagination and infinite scroll
- Always invalidate queries after mutations to refetch data
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- JSON to TypeScriptGenerate TypeScript interfaces from JSON
- TypeScript FormatterFormat and beautify TypeScript code
- Zod Schema GeneratorSmart JSON-to-Zod: merges array samples for optional/nullable/enum/format inference, emits the z.infer type, and validates any payload live
- Component Name GeneratorTurn a description into ranked, kind-aware component names with a file scaffold and a name validator (casing, collisions, clarity)
- JSON Path FinderFind and test JSON paths
- Skeleton Screen GeneratorBuild layout-matched skeleton loaders (card/list/article/table) with shimmer/pulse/wave and a live preview
Query generates a useQuery hook for reading data with a queryKey, a fetch function, and a staleTime. Mutation generates a useMutation hook for create/update/delete that uses useQueryClient and invalidates the related query on success. Infinite Query generates a useInfiniteQuery hook with getNextPageParam and initialPageParam for paginated or infinite-scroll data.
The tool generates a typed fetch function that hits a placeholder endpoint (for example /api/<name>/{id}) and checks response.ok. You should update the URL, request shape, and response type to match your actual API — the generated code gives you the correct structure and error handling to start from.