Web / TanStack Interview Questions
1. What is TanStack and what problem does it solve for frontend developers?
TanStack is a collection of open-source, framework-agnostic libraries by Tanner Linsley that eliminate the most complex, repetitive concerns in modern web apps. The suite includes TanStack Query (server-state caching), TanStack Router (type-safe routing), TanStack Table (headless table logic), Ta
2. What is TanStack Query and what core problems does it solve over plain fetch in Vue?
TanStack Query wraps async data-fetching functions and provides automatic caching, background refetching, request deduplication, loading/error state, and cache invalidation — with zero manual cache code. <!-- WITHOUT TanStack Query --> <script setup lang= "ts" > import { ref, onMounted }...
3. How do you set up TanStack Query in a Vue application?
Create a QueryClient once in main.ts and register it via VueQueryPlugin . The client holds the cache and default options, and is accessible in any component via useQueryClient() ....
4. How should you design queryKeys in TanStack Query and why do they matter?
The queryKey is a serialisable array uniquely identifying a cached query. TanStack Query uses it to look up the cache, trigger refetches when it changes, and scope invalidations....
5. What is the difference between staleTime and gcTime in TanStack Query?
These are the most commonly confused options — they govern completely different lifecycle phases. staleTime vs gcTime Option Controls Default staleTime How long cached data is 'fresh' — no background refetch while fresh 0 ms (immediately stale) gcTime How long...
6. What are the most useful useQuery options beyond queryKey and queryFn in Vue?
TanStack Query exposes many options; the following solve the most common real-world patterns. <script setup lang= "ts" > import { computed, ref } from "vue" import { useQuery, keepPreviousData } from "@tanstack/vue-query" const props = defineProps < { userId: number|null...
7. What is useMutation and how do you use it to submit data in Vue?
useMutation handles write operations (POST/PUT/DELETE). Unlike useQuery it does not run automatically — you call the returned mutate function explicitly.
8. How do you write dependent (sequential) queries in TanStack Query with Vue?
Use the enabled option with a computed() boolean. In Vue every option that reads reactive state must be wrapped in computed() ; otherwise TanStack Query captures the value once at setup and never updates....
9. How do you implement pagination and infinite scroll with TanStack Query?
Standard pagination: plain useQuery with a page ref in the key plus keepPreviousData to avoid blank states. Infinite scroll: useInfiniteQuery accumulates pages automatically....
10. How do you prefetch data in TanStack Query to speed up navigation?
Prefetching loads data into the cache before it is needed — on hover, on route entry, or alongside the current page. When the user navigates, data is already cached and renders instantly....
11. What is TanStack Router and how does it differ from Vue Router?
TanStack Router is a fully type-safe client-side router with end-to-end TypeScript inference for route params, search params, and loaders. A misspelled param or a navigation to a non-existent route is a compile-time error , not a runtime bug....
12. How do you define routes in TanStack Router with Vue?
Use createRootRoute() for the layout root and createRoute() for each page. Routes are assembled into a typed tree and passed to createRouter() ....
13. How do you use URL search params as typed state in TanStack Router?
Declare a validateSearch schema on the route. Search params become typed, validated, URL-persistent state — perfect for filters, sort order, and pagination that must survive refresh and be shareable via URL....
14. What are route loaders in TanStack Router and how do they integrate with TanStack Query?
Route loaders run before the component renders. Using queryClient.ensureQueryData() inside a loader pre-populates the Query cache so the component renders synchronously with no loading spinner.
15. What is TanStack Table and how do you create a basic table in Vue?
TanStack Table v8 is a headless table engine handling sorting, filtering, pagination, selection, grouping and virtualisation. It returns a typed table object with methods and state you use in your own markup — it renders nothing itself....
16. How do you add client-side sorting and column filtering to a TanStack Table in Vue?
Pass getSortedRowModel() and getFilteredRowModel() to useVueTable . Use controlled refs for state so sort/filter can be persisted to the URL or storage.
17. How do you implement pagination with TanStack Table?
Add getPaginationRowModel() to the table options. The table exposes page-navigation helpers and pagination state.
18. How do you add column visibility toggling and row selection to a TanStack Table?
Both are built-in. Column visibility lets users show/hide columns; row selection provides a managed selected-rows map for bulk actions.
19. What is TanStack Form and how do you build a basic form in Vue?
TanStack Form is a headless, type-safe form state library with built-in async validation, field arrays and subscriptions. Unlike Vue-specific libraries (vee-validate, Vuelidate) it is framework-agnostic — the same library targets Vue, React and Solid via adapters.
20. How do you add synchronous and asynchronous field validation in TanStack Form?
Validators run on onChange , onBlur , or onSubmit , synchronously or asynchronously. Async validators support debounce to avoid API calls on every keystroke....
21. How do you manage dynamic field arrays in TanStack Form?
form.Field with mode='array' provides pushValue , removeValue , and moveValue for dynamic lists such as phone numbers, addresses, or order line items. <script setup lang= "ts" > import { useForm } from "@tanstack/vue-form" const form=useForm({ defaultValues: { friends:[{ name:"", age:0...
22. What is TanStack Virtual and when should you use it?
TanStack Virtual renders only the DOM nodes visible in the viewport. With thousands of rows, rendering everything creates thousands of DOM nodes causing slow renders, janky scroll, and high memory use....
23. How do you handle variable-height rows in TanStack Virtual?
Pass a measureElement callback so TanStack Virtual reads each row's actual rendered height and updates its internal size map. Provide estimateSize for initial layout before items are mounted....
24. How do you combine useInfiniteQuery with useVirtualizer for an infinitely scrolling virtualised list?
This is one of the most powerful TanStack patterns: useInfiniteQuery fetches pages as the user scrolls while useVirtualizer renders only visible DOM nodes — together they handle millions of rows with minimal memory. <script setup lang= "ts" > import {...
25. How do you implement optimistic updates with TanStack Query?
Optimistic updates change the UI immediately before the server responds. On error the UI rolls back to the snapshot saved in onMutate ....
26. What are the status and fetchStatus values in TanStack Query v5 and how do they drive UI?
v5 separates state into two orthogonal dimensions: status (what does the cache contain?) and fetchStatus (is a network request happening?)....
27. How do you create links and perform programmatic navigation in TanStack Router with Vue?
TanStack Router provides <RouterLink> for declarative links and useNavigate() for programmatic navigation. Both are fully type-safe — TypeScript errors on invalid paths or missing params.
28. How does TanStack Router handle route-level errors and loading states?
Each route accepts errorComponent and pendingComponent . When a loader throws, errorComponent renders instead of the page — no flash of protected content, no try/catch in every component....
29. How do you integrate TanStack Table with server-side sorting, filtering and pagination?
Set manualSorting and manualPagination to true . TanStack Table manages UI state (current sort, page) but does not process rows — you read that state and send it to your API....
30. What developer tools does TanStack provide and how do you add them in Vue?
TanStack Query and TanStack Router each ship a devtools panel. Query devtools visualise the cache, let you manually invalidate/refetch, and show observer counts....
31. What are query key factories and why are they recommended for large Vue apps?
A query key factory centralises all key definitions in one file. This makes invalidations predictable, lets TypeScript catch typos at compile time, and means a renaming/restructuring only needs to happen in one place....
32. How do you implement cross-field (form-level) validation and handle submission in TanStack Form?
Form-level validators receive the entire form value, enabling rules like 'password must match confirmPassword'. The onSubmit callback exposes formApi to reset or set field errors programmatically after a server response....
33. How do you pass variables to a mutation and use them across lifecycle callbacks?
The mutationFn , onMutate , onSuccess , onError , and onSettled callbacks all receive the mutation variables as their first argument. The exposed variables ref also holds the in-flight variables for use in the template....
34. How do you virtualise a horizontal list or two-dimensional grid with TanStack Virtual?
TanStack Virtual supports vertical (default), horizontal ( horizontal:true ), and grid layouts using two virtualizers — one per axis. Only the cells whose row AND column are both in view are rendered....
35. What are the most common TanStack Query mistakes in Vue and how do you avoid them?
Knowing what not to do is as important as knowing the API. These patterns trip up most developers new to TanStack Query in Vue....
36. How do you implement protected routes and auth redirects in TanStack Router?
Use beforeLoad with throw redirect() . This halts the route loading process before the component ever mounts — no flash of protected content....
37. How do you render custom Vue components inside TanStack Table cells?
The cell column definition accepts a function returning a string, VNode, or component. FlexRender handles all three transparently so you never need conditional render logic....
38. How do the TanStack libraries compose into a full application stack, and what is TanStack Start?
Each library is independently useful, but together they form a coherent, type-safe, headless application stack — no additional state management or routing library required. Full TanStack Stack Layer Library Responsibility Routing TanStack Router Type-safe navigation, search params, loaders Server
