# Tanstack Query Intent Core Coordinate Query Execution

> Use this when coordinating enabled, skipToken, dependent queries, useQueries, parallel queries, disabled queries, background fetching indicators, isFetching, fetchStatus, and declarative refetch behavior.

- Skill: `lukasa1993/tanstack-query-intent-core-coordinate-query-execution` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add lukasa1993/tanstack-query-intent-core-coordinate-query-execution`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lukasa1993/tanstack-query-intent-core-coordinate-query-execution/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: lukasa1993 (https://skillmd.com/u/lukasa1993)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lukasa1993/tanstack-query-intent-core-coordinate-query-execution

---


## Setup

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

export function Projects(props: { userId?: string }) {
  const projects = useQuery({
    queryKey: ['projects', props.userId],
    queryFn: async () => [{ id: 'p1', userId: props.userId }],
    enabled: Boolean(props.userId),
  })

  return <pre>{JSON.stringify(projects.data ?? [])}</pre>
}
```

## Core Patterns

### Gate by dependency

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

export function useUserProjects(userId: string | undefined) {
  return useQuery({
    queryKey: ['projects', userId],
    queryFn: async () => [{ id: 'p1', userId }],
    enabled: userId !== undefined,
  })
}
```

### Run dynamic parallel queries

```ts
import { useQueries } from '@tanstack/react-query'

export function useMessages(ids: Array<string>) {
  return useQueries({
    queries: ids.map((id) => ({
      queryKey: ['message', id],
      queryFn: async () => ({ id, text: 'Hello' }),
    })),
  })
}
```

### Show background refresh separately

```tsx
import { useIsFetching } from '@tanstack/react-query'

export function GlobalRefreshIndicator() {
  const count = useIsFetching()
  return count > 0 ? <p>Refreshing</p> : null
}
```

## Common Mistakes

### HIGH Imperative disabled query

Wrong:

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

export function useSearch(term: string) {
  return useQuery({
    queryKey: ['search'],
    queryFn: async () => [term],
    enabled: false,
  })
}
```

Correct:

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

export function useSearch(term: string) {
  return useQuery({
    queryKey: ['search', term],
    queryFn: async () => [term],
    enabled: term.length > 0,
  })
}
```

Permanent disabling opts out of normal invalidation and dependency-driven cache behavior.

Source: TanStack/query:docs/framework/react/guides/disabling-queries.md

### HIGH Duplicate useQueries keys

Wrong:

```ts
import { useQueries } from '@tanstack/react-query'

export function useUsers(ids: Array<string>) {
  return useQueries({
    queries: ids.map((id) => ({
      queryKey: ['user'],
      queryFn: async () => ({ id }),
    })),
  })
}
```

Correct:

```ts
import { useQueries } from '@tanstack/react-query'

export function useUsers(ids: Array<string>) {
  return useQueries({
    queries: ids.map((id) => ({
      queryKey: ['user', id],
      queryFn: async () => ({ id }),
    })),
  })
}
```

Duplicate keys can share placeholder, selected, or cached data between different items.

Source: TanStack/query:docs/framework/react/reference/useQueries.md

### MEDIUM Full-page spinner on background refetch

Wrong:

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

export function Todos() {
  const query = useQuery({
    queryKey: ['todos'],
    queryFn: async () => [{ id: 1 }],
  })
  return query.isFetching ? (
    <p>Loading</p>
  ) : (
    <pre>{JSON.stringify(query.data)}</pre>
  )
}
```

Correct:

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

export function Todos() {
  const query = useQuery({
    queryKey: ['todos'],
    queryFn: async () => [{ id: 1 }],
  })
  return (
    <pre>
      {query.isFetching ? 'Refreshing ' : ''}
      {JSON.stringify(query.data ?? [])}
    </pre>
  )
}
```

`isFetching` also covers background refreshes after data is already available.

Source: TanStack/query:docs/framework/react/guides/background-fetching-indicators.md