T
tRPC

❓-help

Generic handler for data.isLoading and data.isError

KKratek4/27/2023
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?
Nnlucas4/27/2023
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?
Nnlucas4/27/2023
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...

Looking for more? Join the community!

Recommended Posts
Bug where 2 requests are fired at once. TRPC batches them. Can I cancel the 2nd via ProcedureOption?Hey all. I have a bug where my app fires two identical requests at the same time. This happens do toHow to do an async API call in useEffect (T3 stack)Hey, I have the router below and want to call the `tutor`async in an `useCallback` function, but thepagination - Offset MethodHi trpc has pagination example but only using cursor https://trpc.io/docs/reactjs/useinfinitequery next js appDirNext js tRpc What are the advantages of using trpc instead of the native Next.js APIs when buildingHow can you fetch data on a dynamic router with trpc?I’m creating a table component within my NextJs app. Instead of making an api call in the parent comMocking tRPC call w/ Playwright (Transform Error)I have a tRPC call that I would like to mock out for a Playwright E2E test. I've followed their doczod input validation from ts typeI imported a type using `import type { WebhookEvent } from "@clerk/nextjs/api";`. Is there a way to Looking to fix my tRPC implementationHi guys I am looking for some help implementing tRPC in my current project, I have 3 files that needExpression produces a union type that is too complex to representHi! I have started to encounter the above on error on pretty simple react components using trpc v10 Skipping useQuery with typescriptI'm wondering if there is a way to skip a query in a typescript friendly way? `rtk-query` has a handClerk Webhook Input UndefinedHi! I wrote a public procedure that takes in an input and updates user info based on Clerk Webhook. Getting this error: Cannot read properties of undefined (reading 'upsert')I'm using the T3 Stack. And I'm fairly new to tRPC so I am not sure what this error is caused. I'm