Generic handler for data.isLoading and data.isError

KKratek

4/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?

Nnlucas

4/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? https://tanstack.com/query/v4/docs/react/guides/suspense

Looking for more? Join the community!

tRPC

Generic handler for data.isLoading and data.isError

Join Server

tRPC

Generic handler for data.isLoading and data.isError

Join Server

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 to How 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 the pagination - 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 building How 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 com Mocking 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 doc zod 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 need Expression 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 hand Clerk 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