Skills
.Work. You
Rest

preact/compose-with-tanstack-query

Official

Server-side Preact tables with async state

Software Engineering#preact#tanstack query#server pagination#remote sorting#remote filtering#async table data#reactive queryKey
AuthorTanStack
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Building server-side datagrids in Preact often leads to hard-to-manage async flows, inconsistent UI states between page/sort/filter changes, and extra client-side work when the server is already slicing the data.

Core Features & Use Cases

  • Reactive query keys from external atoms: Drive fetches from pagination/sorting/filtering atoms so requests stay in sync with table state.
  • Server-owned manual slicing: Use manualPagination, manualSorting, and manualFiltering for the slices the server owns, while computing rowCount from the server response.
  • Smooth UX with keepPreviousData: Prevent “0 rows flash” by using placeholderData: keepPreviousData during transitions.
  • Practical use case: Fetch paginated rows for a table UI where changing page number, sort order, or filters immediately triggers a refetch with the correct cache key.

Quick Start

Apply the preact/compose-with-tanstack-query recipe to wire useQuery to your table atoms, include keepPreviousData, and ensure your server fetchData returns both rows and rowCount.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: preact/compose-with-tanstack-query
Download link: https://github.com/TanStack/table/archive/main.zip#preact-compose-with-tanstack-query

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.