useQuery alapok

Alap használat

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

function UserList() {
  const { data, isPending, isError, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json()),
  })

  if (isPending) return <div>Töltés...</div>
  if (isError) return <div>Hiba: {error.message}</div>

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

queryKey

Tömb, ami egyedileg azonosítja a query-t és a cache kulcsa:

['users']                         // összes user
['users', userId]                 // adott user
['users', { status: 'active' }]   // szűrt lista

Ha két helyen ugyanaz a queryKey, ugyanazt a cache-t használják.

queryFn

Promise-t visszaadó függvény, ami az adatlekérést végzi:

queryFn: () => fetch('/api/users').then(res => res.json())

// axios
queryFn: () => axios.get('/api/users').then(res => res.data)

// Supabase
queryFn: async () => {
  const { data, error } = await supabase.from('users').select('*')
  if (error) throw error
  return data
}

Fontos: hiba esetén dobnod kell (throw), hogy isError igaz legyen.

Állapot flagek

const {
  data,
  isPending,   // első betöltés, nincs cache
  isFetching,  // bármilyen aktív fetch (háttérben is)
  isError,
  error,
  isSuccess,
  status,      // 'pending' | 'error' | 'success'
  fetchStatus, // 'fetching' | 'paused' | 'idle'
} = useQuery({ queryKey: ['users'], queryFn: fetchUsers })

isPending vs isFetching:

isPending: csak az első betöltéskor igaz.
isFetching: minden fetch alatt igaz (háttérfrissítésnél is).

📝 Összefoglaló

useQuery = data fetch hook.
queryKey = cache kulcs.
queryFn minden esetben Promise-t ad vissza és hibánál dob.
isPending az első loading állapot, isFetching minden aktív fetch-re igaz.

useQuery alapok

useQuery alapok

Alap használat

queryKey

queryFn

Állapot flagek

📝 Összefoglaló

On this page