Kratek
Kratek14mo 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
Nick14mo 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
Nick14mo ago
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...