Best way to type React components that don't directly render the data?

What is the best to type data in props that you are fetching from trpc? The error it is giving me is the following

typescript: Type '(Upload & { images: Image[]; }) | null | undefined' is not assignable to type 'UploadSelect'.
     Type 'undefined' is not assignable to type 'UploadSelect'.

typescript: Type '(Upload & { images: Image[]; }) | null | undefined' is not assignable to type 'UploadSelect'.
     Type 'undefined' is not assignable to type 'UploadSelect'.

Sorry if this is noob question, but i couldn't figure it out reading the docs.

5 Replies

Neto•2y ago

Data by default isn't defined yet Because is loading and such For correct typings You can use the RouterOutput type He is exported together with the API const You can use RouterOutput['upload']['getUpload']

omnimaxOP•2y ago

Thanks a bunch! Where is the RouterOutput defined?

Neto•2y ago

Check from where the trpc variable is exported Should be there

CODY•2y ago

hi, related question. I want to have {error, data} in my component file? Is it the correct way?

Neto•2y ago

the RouterOuput is just a way of getting the type of the expected output the TrpcError is excluded from that so you have to

type ProjectProps = {
  projects: .... | null
  error: TRPCError | null
}

// deal at component level

type ProjectProps = {
  projects: .... | null
  error: TRPCError | null
}

// deal at component level

Gaming

Programming

Best way to type React components that don't directly render the data?