useFetchUrl

A custom hooks in TypeScript for fetching data from a URL and managing its state, including status and error information.

API Reference

useFetchUrl Hook in Typescript

Hook that makes the request itself

Parameters

1useFetchUrl<T, K = unknown>(url: string, initialValue: T) => AnswerInterface<T, K>

Parameters	Type	Description
url	string	Required. URL to fetch data from
initialValue	T	Initial value of data (optional with default null)
T	any type	Type of data
K	unknown or any type	Type of error (optional with default unknown)

Usage

Call the hook useFetchUrl with two generic parameters, T and K, representing the type of data to be fetched and the type of error, respectively. The second generic parameter is optional and has a default of unknown.

Pass in two arguments: the URL to fetch data from and an initial value for the data (optional with default null).

Example:

1import { useFetchUrl } from "./useFetchUrl";
2import { FetchStatus } from "./FetchStatus";
3
4interface IData {
5  message: string;
6}
7
8interface IError {
9  message: string
10}
11
12const initialValue: IData = { message: "Important things!" };
13
14const App = () => {
15  const { data, status, error } = useFetchUrl<IData, IError>("https://your-url", initialValue);
16
17  if (status === FetchStatus.LOADING) {
18    return <div>Loading...</div>;
19  }
20
21  if (status === FetchStatus.ERROR) {
22    return <div>{error}</div>;
23  }
24
25  return <div>{data.message}</div>;
26};

Return type

The hook returns an object with three properties:

• data: state of data of type T
• status: status of fetch operation of type FetchStatus
• error: error message of type K (if any)

useFetch Hook in TypeScript

Hook using a passed promise

Parameters

1useFetch<T, K = unknown>(PromiseFunction: () => Promise<T>, initialValue: T) => AnswerInterface<T, K>

Parameters	Type	Description
PromiseFunction	() => Promise<T>	Required. Promise function to fetch data from
initialValue	T	Initial value of data (optional with default null)
T	any type	Type of data
K	unknown or any type	Type of error (optional with default unknown)

Usage

Call the hook useFetch with two generic parameters, T and K, representing the type of data to be fetched and the type of error, respectively. The second generic parameter is optional and has a default of unknown.

Pass in two arguments: the Promise function to fetch data from and an initial value for the data (optional with default null).

Example:

1import { useFetch } from "./useFetch";
2import { FetchStatus } from "./FetchStatus";
3
4interface IData {
5  message: string;
6}
7
8interface IError {
9  message: string
10}
11
12const initialValue: IData = { message: "" };
13
14const fetchData = () => {
15  return new Promise<Data>(resolve => {
16    setTimeout(() => {
17      resolve({ message: "Important things!" });
18    }, 1000);
19  });
20};
21
22const App = () => {
23  const { data, status, error } = useFetch<IData, string>(fetchData, initialValue);
24
25  if (status === FetchStatus.LOADING) {
26    return <div>Loading...</div>;
27  }
28
29  if (status === FetchStatus.ERROR) {
30    return <div>{error}</div>;
31  }
32
33  return <div>{data.message}</div>;
34};

Return type

The hook returns an object with three properties:

• data: state of data of type T
• status: status of fetch operation of type FetchStatus
• error: error message of type K (if any)

FetchStatus Enum

This is a TypeScript enum that consists of three fields: COMPLETE, LOADING, and ERROR. It represents the status of a fetch operation.

1enum FetchStatus {
2  COMPLETE,
3  LOADING,
4  ERROR
5}

AnswerFetch Type

A type in TypeScript that describes the possible states of a fetch operation, including complete, loading, and error states.

Usage

This type is used to describe the shape of an object returned from a fetch operation, with three possible states: CompleteFetch, LoadingFetch, and ErrorFetch.

Types

Type	Description
CompleteFetch<T>	Represents a successful fetch operation with data of type T. Includes: - status of FetchStatus.COMPLETE - data of type T - error of null.
LoadingFetch	Represents a fetch operation in progress with: - status of FetchStatus.LOADING - data of null - error of null.
ErrorFetch<K>	Represents a failed fetch operation with: - status of FetchStatus.ERROR - data of null - K as the type of error.
AnswerFetch<T, K>	Represents any of the three fetch states, with: - T as the type of successful data - K as the type of error.

Advanced usage

You can create a wrapper for the hook to useFetchUrl even more cleanly.

This is the useUsers file.

1interface IUser {
2    name: string,
3    age: number
4}
5
6//You can do the same using the useFetch hook
7export const useUsers = () => useFetchUrl<IUser[]>("https://your-url/users")

This is the Users file.

1import { useUsers } from "./hooks/useUsers";
2
3const Users = () => {
4  const { data, status, error } = useUsers();
5  const {COMPLETE, ERROR, LOADING} = FetchStatus
6
7  if (status === LOADING) 
8    return <div>Loading...</div>;
9  if (status === ERROR) 
10    return <div>{error}</div>;
11  if (status === COMPLETE)
12  return (
13      <div>
14        {data.map(user => 
15            <div>
16                {user.name} - {user.age}
17            </div>
18        )}
19      </div>
20  );
21};