Generic handler for data.isLoading and data.isError

Hi, I'm looking for a way to create generic interface for useQuery result (budgetData from example below). My aim is to create generic function that handle isLoading and isError in every component.

Example below:

const budgetData = api.budgets.getAllBudgets.useQuery();

  if (budgetData.isLoading) {
    return;
  }

  if (budgetData.isError) {
    router.push(Routes.ERROR_500);
    return null;
  }

Could you help me with it guys?

Typescript is structurally typed so if all you want is those two then ‘{ isLoading: boolean , isError: boolean }’ is your type

But you’re probably doing something weird

Maybe you want to start using Suspense and ErrorBoundaries instead?