React useQuery

Installation

Click here to go to website

npm i @tanstack/react-query

or

bun add @tanstack/react-query

Usage

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

function Todos() {
  const { data, isPending, error } = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then(r => r.json()),
  })

  if (isPending) return <span>Loading...</span>
  if (error) return <span>Oops!</span>

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

export default Todos

Install and Import the Devtools

The devtools are a separate package that you need to install:

npm i @tanstack/react-query-devtools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'