Ability to let the client select the fields it wants from the returned data. Half done, need help to fix the types for the returned data, type for select works already

[jgb-solutions]

I'll go straight to the point. I added a select field that allows to field and nested fields based on the return data for a query. Now I also have a function that does the picking, but the returned type is not good. Partially it gets the nested fields right, but not the base object.

Here's the type for the select param:

export type NestedKeys<T> = T extends Record<string, any>
  ? {
    [K in keyof T]: T[K] extends any[] ? Partial<NestedKeys<T[K][number]>> | boolean : Partial<NestedKeys<T[K]>> | boolean
  }
  : boolean

That way it works just like Prisma select where you provide true for the keys you want. That works on the client side for type and functionality. Here's a sample of the client code:

const album = await trpcClient.mp3pam.fetchAlbumDetail.query({
    params: { albumId },
    select: {
      id: true,
      title: true,
      coverUrl: true,
      releaseYear: true,
      artist: {
        stageName: true,
        id: true,
      },
      tracks: {
        id: true,
        title: true,
        playCount: true,
        downloadCount: true,
        posterUrl: true,
        audioUrl: true,
        artist: {
          stageName: true,
          id: true
        }
      },
    }
  })

Like I said intellisense works. Here's how I use it on the schema:

export const fetchAlbumDetailSchema = z.object({
  params: z.object({
    albumId: z.string(),
  }),
  select: z.custom<Partial<NestedKeys<AlbumDetail>>>().optional()
})

It's used a custom type and it's optional.

Here's what my query in TRPC looks like:

fetchAlbumDetail: pp // pp stands for a public procedure
    .input(fetchAlbumDetailSchema)
    .query(async ({ input: { params: { albumId }, select } }) => {

      const album = await fetchAlbumDetail(albumId)

      if (!album) return null

      if (select && Object.keys(select).length) return pickSelected<AlbumDetail, typeof select>(album, select)

      return album
    })

That's when things start to stop working with the types, typeof select is not compatible with the argument of the following function, defined like this:

type AnyObject = Record<string, any>


export function pickSelected<T extends AnyObject, U extends NestedKeys<T>>(
	obj: T,
	keysToPick: U
) {
	const result: any = {}

	for (const key in keysToPick) {
		if (keysToPick[key] && obj.hasOwnProperty(key)) {
			if (Array.isArray(obj[key])) {
				result[key] = obj[key].map((item: any) => pickSelected(item, keysToPick[key] as unknown as NestedKeys<T[typeof key]>))
			} else if (typeof obj[key] === 'object' && obj[key] !== null) {
				result[key] = pickSelected(obj[key], keysToPick[key] as unknown as NestedKeys<T[typeof key]>)
			} else {
				result[key] = obj[key]
			}
		}
	}

	return result as Required<{ [K in keyof U]: K extends keyof T ? T[K] : NestedKeys<T> }>
}

Functionality wise I got my select fields working like GraphQL, great! But the type breaks. I'm not a TypeScript guru yet to figure out what didn't work out. I adapted the types with the help of ChatGPT but it can't figure everything out. I'm looking to have end to end type safety just like I would using Prisma select, but using TRPC instead. I saw a similar issue where people said there was a limitation of typescript. But I know this time that it's possible. I'm also there. Just need to fix the type and have nice DX everywhere. And how knows may TRPC could improve that idea and incorporate it in future versions. Thanks in advance!

[KATT]

See #2150

[KATT]

If you can find a workaround for your use-case that'd be interesting to see though