One hook for async dataOne hook for async data

Retry after a failure

Tick Fail and refetch both. Untick, then press Retry.

export function useQuery<T>(
  key: string,
  fetcher: () => Promise<T>,
  options?: UseQueryOptions<T>
) {
  const [data, setData] = useState<T | null>(null)
  const [error, setError] = useState<Error | null>(null)
  const [loading, setLoading] = useState(false)

  const refetch = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const result = await fetcher()
      setData(result)
      options?.onSuccess?.(result)
    } catch (err) {
      setError(err as Error)
      options?.onError?.(err as Error)
    } finally {
      setLoading(false)
    }
  }, [fetcher, options])

  useEffect(() => {
    if (options?.enabled !== false) refetch()
  }, [key, refetch, options?.enabled])

  return { data, error, loading, refetch }
}

Wait for inputs with enabled

Press Sign in, then Sign out.

const fetchWatchlist = useCallback(
  () => api.get(`/users/${userId}/watchlist`),
  [userId]
)
const options = useMemo(() => ({ enabled: userId !== null }), [userId])

const { data, loading, error } = useQuery(`watchlist:${userId}`, fetchWatchlist, options)

Stable inputs, stable requests

Press Mount both and compare the request counts.

const fetchMarkets = useCallback(() => api.get("/markets"), [])
const options = useMemo(() => ({
  onSuccess: (markets) => log(`Fetched ${markets.length} markets`),
  onError: (err) => log(`Failed: ${err.status}`),
}), [])

const { data, error, loading, refetch } = useQuery("markets", fetchMarkets, options)

Why it matters, pros and cons