• TanStack Query

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

function Users() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['users'], // ← このキーでキャッシュされる
    queryFn: () => axios.get('/api/users').then(res => res.data),
  })

  if (isLoading) return <p>Loading...</p>
  if (isError) return <p>Error!</p>

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

- データ取得・キャッシュ管理の仕組みを提供する

• 状態管理
• isLoading, isErrorなどの管理が簡単にできる。自前で書かなくて良くなる
• キャッシュ
• 時間: stale（鮮度が低い）/fresh, staleTimeを指定することで何msecで古いものか判定させる
• 状況
• refetchOnWindowFocus（ウィンドウにフォーカスが戻ったらrefetchするかどうか）
• refetchOnMount(マウント時にrefetchするかどうか)のタイミングでも決められる
• 再取得(refetch)
• サーバにデータを取得しに行き、キャッシュも講師s塗る
• デフォルトでは、staleでもまずキャッシュを返して裏で再取得する仕組みになっている。
• SWR (Stale-While-Revalidate)
• 自動リトライ
• サーバー状態とクライアント状態の分離
• サーバの状態（ユーザの一覧データなど）はクライアントとは異なり、データが古くなったり、複数のコンポーネントが利用するかもしれない。そのサーバの状態を管理する仕組みをTanstack Queryが提供してくれている。
• 複数のコンポーネントで共有したい場合は、cacheKeyを同じにする