react-query-hooks

Name: react-query-hooks
Author: CELAEST

Use when editing React hooks that fetch data with TanStack Query. Covers useInfiniteQuery patterns, PAGE_SIZE=15, getNextPageParam logic, useMemo for page flattening, query key conventions, and useApi

by CELAEST(0) 0 installs

Free

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Instruction file imported from CELAEST/celaest-dashboard (.github/instructions/react-query-hooks.instructions.md). Copyright stays with the author.

React Query Hook Conventions

Use useInfiniteQuery for ANY data displayed in DataTable (never useQuery)
PAGE_SIZE constant = 15, defined at top of file
Always get { token, orgId } from useApiAuth()
Query key must include orgId: [...QUERY_KEYS.<domain>.all, orgId]
enabled: !!token && !!orgId
Flatten pages with useMemo(() => data?.pages.flatMap(p => p.data) ?? [], [data])
Return: { items, total, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage }
For mutations: use queryClient.invalidateQueries on success
For optimistic updates with infinite data: map over old.pages array

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/celaest-celaest-dashboard-react-query-hooks-instructions/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

celaest-celaest-dashboard-react-query-hooks-instructions.ocm.jsonjson

{
  "ocm": "1",
  "id": "celaest-celaest-dashboard-react-query-hooks-instructions",
  "kind": "skill",
  "name": "react-query-hooks",
  "description": "Use when editing React hooks that fetch data with TanStack Query. Covers useInfiniteQuery patterns, PAGE_SIZE=15, getNextPageParam logic, useMemo for page flattening, query key conventions, and useApiAuth usage.",
  "publisher": "CELAEST",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "data_analysis"
    ],
    "tags": [
      "skill-md",
      "github-instructions"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Use when editing React hooks that fetch data with TanStack Query. Covers useInfiniteQuery patterns, PAGE_SIZE=15, getNextPageParam logic, useMemo for page flattening, query key conventions, and useApiAuth usage."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-instructions",
      "repository": "https://github.com/CELAEST/celaest-dashboard",
      "path": ".github/instructions/react-query-hooks.instructions.md",
      "ref": "99c97601b035f4e8e56c28ad26ed964e20fcb498",
      "url": "https://github.com/CELAEST/celaest-dashboard/blob/99c97601b035f4e8e56c28ad26ed964e20fcb498/.github/instructions/react-query-hooks.instructions.md",
      "key": "CELAEST/celaest-dashboard/.github/instructions/react-query-hooks.instructions.md"
    },
    "applies_to": [
      "src/features/**/hooks/*.ts",
      "src/features/**/stores/*.ts"
    ]
  },
  "instructions": "# React Query Hook Conventions\n\n- Use `useInfiniteQuery` for ANY data displayed in DataTable (never `useQuery`)\n- PAGE_SIZE constant = 15, defined at top of file\n- Always get `{ token, orgId }` from `useApiAuth()`\n- Query key must include `orgId`: `[...QUERY_KEYS.<domain>.all, orgId]`\n- `enabled: !!token && !!orgId`\n- Flatten pages with `useMemo(() => data?.pages.flatMap(p => p.data) ?? [], [data])`\n- Return: `{ items, total, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage }`\n- For mutations: use `queryClient.invalidateQueries` on success\n- For optimistic updates with infinite data: ",
  "cost": {
    "context_tokens": 156
  }
}

Fetch it by URL: GET /api/v1/registry/celaest-celaest-dashboard-react-query-hooks-instructions/manifest?version=1.0.0

About

React Query Hook Conventions

Use it

Manifest

Reviews