CtrlK
BlogDocsLog inGet started
Tessl Logo

with-tanstack-query

Compose Solid Query reactive options with Solid Table manual server processing. Load for tracked query-key signals, query result getters, server row counts, keepPreviousData, and avoiding React Query patterns or duplicated data state.

66

Quality

80%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

This skill builds on @tanstack/table-core#client-vs-server, getting-started, and table-state. Query owns remote data; Table receives already processed rows for each manual stage.

Setup

import { keepPreviousData, useQuery } from '@tanstack/solid-query'
import { createAtom, useSelector } from '@tanstack/solid-store'
import {
  createTable,
  rowPaginationFeature,
  tableFeatures,
} from '@tanstack/solid-table'

const features = tableFeatures({ rowPaginationFeature })
const emptyRows: Array<{ id: string }> = []
const paginationAtom = createAtom({ pageIndex: 0, pageSize: 20 })
const pagination = useSelector(paginationAtom)
const result = useQuery(() => ({
  queryKey: ['people', pagination()],
  queryFn: () => fetchPeople(pagination()),
  placeholderData: keepPreviousData,
}))
const table = createTable({
  features,
  columns,
  get data() {
    return result.data?.rows ?? emptyRows
  },
  get rowCount() {
    return result.data?.rowCount
  },
  atoms: { pagination: paginationAtom },
  manualPagination: true,
})

Core Patterns

Track every server-owned slice

const result = useQuery(() => ({
  queryKey: ['people', pagination(), sorting()],
  queryFn: () => fetchPeople({ pagination: pagination(), sorting: sorting() }),
}))

Expose query results through getters

const table = createTable({
  features,
  columns,
  get data() {
    return result.data?.rows ?? emptyRows
  },
})

Common Mistakes

HIGH Snapshotting the query key

Wrong:

useQuery({ queryKey: ['people', pagination()], queryFn: fetchPeople })

Correct:

useQuery(() => ({
  queryKey: ['people', pagination()],
  queryFn: () => fetchPeople(pagination()),
}))

Solid Query's options factory tracks signals read while constructing the key and request.

Source: examples/solid/with-tanstack-query

HIGH Copying React Query state glue

Wrong:

useEffect(() => setRows(result.data?.rows ?? []), [result.data])

Correct:

get data() { return result.data?.rows ?? emptyRows }

Solid getters connect the query result directly without a second synchronization layer.

Source: examples/solid/with-tanstack-query

HIGH Expecting manual mode to process

Wrong:

createTable({ features, columns, data, manualPagination: true })

Correct:

createTable({
  features,
  columns,
  get data() {
    return result.data?.rows ?? emptyRows
  },
  get rowCount() {
    return result.data?.rowCount
  },
  manualPagination: true,
})

Manual pagination bypasses the client row model; it does not fetch, page, or count data.

Source: docs/framework/solid/guide/pagination.md

API Discovery

Inspect installed node_modules/@tanstack/solid-table/dist/createTable.d.ts and the relevant core feature source; inspect @tanstack/solid-query source for reactive option shapes.

Repository
TanStack/table
Path

packages/solid-table/skills/with-tanstack-query/SKILL.md

Commit

9e523bc

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill