vue/compose-with-tanstack-query

What problem does it solve?

This Skill solves the problem of implementing server-side pagination, sorting, and filtering in a Vue data grid without breaking reactivity or causing incorrect page counts and UI flicker during refetches.

Core Features & Use Cases

• Server-controlled pagination/sorting/filtering: Use manualPagination, manualSorting, and manualFiltering so the table renders exactly the server-supplied slice.
• Query-driven data fetching keyed by table state: Build a reactive useQuery(() => ({ queryKey, queryFn })) that refetches whenever pagination/sorting/filter state changes.
• Correct paging metadata: Provide rowCount so table.getPageCount() works without loading all rows client-side.
• Smooth UX during transitions: Use placeholderData: keepPreviousData to prevent a “0 rows flash” while new pages load.
• Recommended atom pattern: Leverage external createAtom + options.atoms so table updates automatically propagate to the query without on[State]Change wiring.
• Use Case: When you have a large “people” dataset and want the pager, sort headers, and filters to drive API requests that return paginated results plus a total row count.

Quick Start

Use the skill to implement an example server-paginated @tanstack/vue-table + @tanstack/vue-query integration following the documented approach in the canonical Vue example.