Manage partial/subset types to pass around in an client app

[depsimon]

Let's say I have multiple queries that return User, Post etc..

I can get them with getUserById(), getFeaturedUsers(), getPostById(), getPostsByUserId(), etc...

How can I easily "share" a subset of a query result around in my client app?

For instance I want some "subsets" like this:

type UserSubset = Pick<UserDto, "id"> & { profile?: Maybe<Pick<UserProfileDto, "name" | "avatarUrl"> }
type PostSubset = Pick<PostDto, "id" | "title" | "publicationDate"> & { author?: UserSubset }

This works but clearly doesn't feel right as I keep adding up Subset types and end up having to override a lot of non-nullable fields that I don't query.

I was wondering if there was not an easier way to handle that.

My end goal is to be able to type (React/TS) Component Props based on the minimum info I'm certain I'll get in all queries. For instance <PostAuthor author={post.author} /> with author: UserSubset, <UserDropdown user={user} /> with user: UserSubset, etc...

Are "GraphQL Fragments" the way to go? How can I share the fragments in multiple queries & use their types? (I tried that, but had lots of type issues with the Fragments themselves)