Dynamically type the data result of a hook according to inputs

[anthonyshew]

Hey, folks!

We ran into a hiccup with trying to dynamically type the data that comes back from our endpoint.

Imagine an identity endpoint that can return either a string or a number:

// I recognize that you probably wouldn't do actually want to do this
// This is only an example to setup for our more complex real world example

const router = createRouter().query("foo", {
    input: z.enum(["string", "number"]),
	resolve: async ({input}) => {
		const pickEm = {
			string "test",
			number: 42
		}

		return pickEm[input]
	}
})

Now, when we go to use this on the frontend:

const query = trpc.useQuery(["foo", "string"])
query.data // Inferred type is number | string | undefined
// I would love for this hook have an inferred type of string

const query = trpc.useQuery(["foo", "number"])
query.data // Inferred type is number | string | undefined
// I would love for this hook have an inferred type of number

That's my simple, silly example to demonstrate the idea of what we're after.
In the real world, what we are running into is this:

// trials/get is an endpoint that takes inputs for Prisma includes or selects for the Trial model
const query = trpc.useQuery(["trials/get", { select: { judgeName: true } } ])
query.data // Has no idea about the select, simply types for the whole Trial model

And here is our custom hook that we hacked together to resolve our problem.

export const useTrial = <T extends Prisma.TrialSelect>({
	trialId,
	select
}: {
	trialId: string
	select: Prisma.Subset<T, Prisma.TrialSelect>
}) => {
	type DataPayload = Prisma.TrialGetPayload<{ select: typeof select }>

	const query = trpc.useQuery(["trials/get", { id: trialId, select }])

	const queryDataTypeFix = query.data as Prisma.TrialSelect

	// Fix the data with itself but typed as what we want
	query.data = queryDataTypeFix

	return query as
		| Omit<typeof query, "data"> & {
				data: DataPayload
		  }
}

This seems to work well enough to get the types right. But I was surprised there wasn't a more tRPC-ish way (that we could figure out).

100% am willing to contribute if there is a way we think we can do this - although I can't say I'll be too useful actually making the types happen. The TS you guys have drawn up is pretty opaque to me. 🙃

I know with v10 coming, we could be allowed to make some major change if needed to make this reality.

tRPC for life, yo! Keep it up!

[sachinraja]

I'm unsure if this is possible within the bounds of TS, but I'll look into this. Thanks for the detailed feature request!

[anthonyshew]

I did indeed figure this was a TypeScript limitation with all the mastery that I saw going on under the hood of tRPC. 😄

No problem, thanks for looking at it!

[anthonyshew]

Oh! I forgot to add...

We're also happy to use a generic if that opens up our use case.

const { data } = trpc.useQuery<number>( [ "foo", "number" ] )
query.data // Now it knows to be of type number

This, of course, is not automagical but it would still do what we needed to do.

We did notice that there is already a generic right there where I'm proposing but couldn't figure out how to make it work. We couldn't figure out if that was what it was for.

[mmkal]

I think this would require higher kinded types to work, so maybe one day: microsoft/TypeScript#1213

There are some workarounds involving module augmentation but I'm not sure they'd be practical in this case.

[sachinraja]

I'm thinking any sort of generic solution might be impossible because of microsoft/TypeScript#1213 ("Higher Kinded Types"). tRPC already takes in a generic for the function.

[anthonyshew]

Great minds thinking alike.

@mmkal I'd agree that that doesn't seem like something we would want to get into for this.

@sachinraja I did notice that generic...But we had no idea what to do with it or if it was going to fit what we wanted to do. The inspiration for this idea came from react-query where you can do:

const query = useQuery<number>( )
query.data // Now it's a number

const query = useQuery<string>( )
query.data // Now it's a string

Maybe that is what that generic does and we just didn't spend enough time fussing with it to find out? If it is, I'd be happy to add to the docs to make this clear for others.

Of course, tRPC is much different than react-query - but it's API here is quite simple to use for getting whatever type you want. Wondering if we could accomplish something similar. 🤔

[sachinraja]

So you want to be able to override the type of a data from useQuery? Using a generic to do that is not possible in v9 currently but it is on the alpha version.

[anthonyshew]

Yeah, I'd say so! If TypeScript isn't going to play nice, I still want to be able to have the types be correct for a payload that would come back shaped differently for different situations.

If it's already being done in v10, then it sounds like I'm already getting what I want. 😄 👍 Of course, best case scenario is always automagic but, if we can't, we can't, and putting my own type on there is certainly acceptable.

[KATT]

Leaving this here for reference:

Ok, so. I dig in this a little and found a way to make this work (with a little hacky-hacky going on).

The fix I did was not to build another procedure, but to build a custom hook based upon the hook helpers trpc is exposing.

I am not able to share a lot of the source code, since the very most is confidential, but this is what I am able to share:

Entrypoint

const objects = {
	object1: { ...someConfiguration } as const,
	object2: { ...someConfiguration } as const,
} as const;

type ObjectIds = keyof typeof objects;

Procedure

answers: protectedProcedure
  .input(
    z.object({
      objectId: z.string(),
    }),
  )
  .query(async function ({ input, ctx }) {
    if (!isValidObjectId(input.objectId))
      return { answers: {}, dependencies: {} };

    const {
      [input.objectId]: { answers, dependencies },
    } = await findAndFormatObjectAnswersBatch([input.objectId], ctx.userId);

    return { answers, dependencies };
  }),

So, basically, what I wanted to achieve is, having a hook that is typed based upon which objectId I am going to add to the params. This (with a normal function) can be achieved by infering types.

Hook

// @note: `ObjectIds` is a `keyof` type based on the configuration object of all objects.

export function useAnswers<ObjectId extends ObjectIds>(
  objectId: ObjectId,
) {
  return trpc.objects.answers.useQuery<
    inferProcedureOutput<"objects.answers">,
    { answers: inferAnswers<ObjectId>; ... }
  >({ objectId });
}

With typing the useQuery with some custom types, I am able to achieve the inference, based on the input.

Originally posted by @iduuck in #3311 (comment)

[dBianchii]

+1 to this

[stychu]

still not possible ?

[KATT]

Not AFAIK