Kratek•15mo ago

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;
  }

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?

2 Replies

Nick•15mo ago

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?

Nick•15mo ago

https://tanstack.com/query/v4/docs/react/guides/suspense

Suspense | TanStack Query Docs

NOTE: Suspense mode for React Query is experimental, same as Suspense for data fetching itself. These APIs WILL change and should not be used in production unless you lock both your React and React Query versions to patch-level versions that are compatible with each other. React Query can also be used with React's new Suspense for Data Fetching...