Use Fetch

import { UseFetchDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useFetch);

Usage

The useFetch hook sends a GET request to the specified URL and returns the response data, loading state, error, refetch and abort functions.

Definition

interface UseFetchOptions extends RequestInit {
  autoInvoke?: boolean;
}

interface UseFetchReturnValue<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<any>;
  abort: () => void;
}

function useFetch<T>(
  url: string,
  options?: UseFetchOptions,
): UseFetchReturnValue<T>

Exported types

UseFetchOptions and UseFetchReturnValue types are exported from the @mantine/hooks package; you can import them in your application:

import type { UseFetchOptions, UseFetchReturnValue } from '@mantine/hooks';