Data Fetching

The recommended way to fetch data is to use the useFetch or useFetchProxy hooks from the Blotch Library.

These hook fetches data in a way that is optimized for Widgets and the Widget creation workflow. It provides helpful out of the box features you will most likely need when creating Widgets.

useFetch

The standard hook. It returns a data property which is of type T | undefined. It is undefined when data is still loading - of which you can track by checking if data is there, or checking the isLoading property.

tip

T is the return type of the data you get from the response of fetching your data. There are tools online such as QuickType, which automatically generates TypeScript type definitions from JSON. We use this extensively to type T when fetching data.

Usage

import { useFetch } from "~lib/use-fetch";

...

const { data, isLoading } = useFetch<T>(url, options);

useFetchProxy

In the case where you experience CORS issues, we have created a drop in replacement for the useFetch hook with an identical API to circumvent these issues.

Usage

import { useFetchProxy } from "~lib/use-fetch-proxy";

...

const { data, isLoading } = useFetchProxy<T>(url, options);