Weboldal keresés

reactjs - A trpc vagy a react-query useQuery eredmény "data" tulajdonságának typescript típusának megszerzése

A React + TRPC alkalmazásomban a kliens oldalon a következőt hívom: const { data: promotion }=trpc.promotions.getPromotion.useQuery({ id: promotionId }). A promotion típusa azáltal kerül meghatározásra, hogy megnézzük a tényleges szerveroldali kód visszatérési típusát:

  getPromotion: protectedProcedure
    .input(z.object({ id: z.string() }))
    .query(async({ ctx, input }) => {
      const promotion = await ctx.prisma.promotion.findUniqueOrThrow({
        where: {
          id: input.id
        }
      })

      return {
        ...promotion,
        canModify: false
      }
    })

Azonban ezt ugyanazt a típust egy másik összetevő felületén is használni akarom:

interface Example {
   promotion: TheDetectedTypeOfGetPromotionReturn??
}

A probléma az, hogy nem találok módot arra, hogy „kivonjam” a szükséges típust.

Azt gondoltam, talán használhatnám a ReturnType<typeof trpc.promotions.getPromotion.useQuery>['data']-t, de az csak unknown-ot ad vissza. Mégis, a data egy érvényes típus a visszaadott objektumon.

Itt van definiálva a useQuery kód: https://github.com/trpc/trpc/blob/9e84d4d9c43de3272aa84bf4110e31e47dc5dda6/packages/react-query/src/shared/hooks/createHooksInternal.tsx#L427

Itt van az a lekérdezés-alapú típus, amit a react-query használ: https://github.com/TanStack/query/blob/1614c31f84744c62b5bee8f2ff97fc15a1652e86/packages/query-core/src/types.ts#L367

Válasz #1

Sikerült így megcsinálnom

import {type UseTRPCQueryResult} from '@trpc/react query/shared'
import {type inferRouterOutputs} from '@trpc/server'
import {type TRPCClientErrorLike} from '@trpc/react-query'

type YourType = UseTRPCQueryResult<inferRouterOutputs<AppRouter>['promotions']['getPromotions'], TRPCClientErrorLike<AppRouter>>['data']

Válasz #2

A hivatalos dokumentációból valami ilyesmit használhat:

import type { inferRouterOutputs } from '@trpc/server';
import type { AppRouter } from './server';
 
type RouterOutput = inferRouterOutputs<AppRouter>;

type OutputExample = RouterOutput['someRoute']['someQuery'];

Kapcsolódó cikkek