tanstack-query-intent-framework-shape-data-and-render-e-feb144a6

This skill builds on core/fetch-and-observe-queries and core/seed-placeholder-select-and-transform-data.

Setup

import { useQuery } from '@tanstack/react-query'

export function TodoCount() {
  const { data } = useQuery({
    queryKey: ['todos'],
    queryFn: async () => [{ id: 1 }, { id: 2 }],
    select: (todos) => todos.length,
  })
  return <p>{data ?? 0}</p>
}

Hooks and Components