Equivalent abstraction <-> GQL Fragment Masking

[osdiab]

Hi, I'm coming from GraphQL land and the concept of Fragment Colocation/Fragment Masking in tools like graphql-codegen and gql.tada is popular, where one colocates the actual data needed for a usage, with the implementation itself to avoid issues like overfetching as usage changes over time. Fields from a fragment are hidden behind a "mask" so that only the code that declares the data dependency can use it, encouraging each individual usage to declare their dependencies independently.

Is there a way to achieve something similar to this in Drizzle? For example, if I declared a users table with a posts relation, and a component needs the user's ID, name, and certain fields from posts like id, title, body; would I be able to somehow make a type-safe notion of a "fragment" of this query, and then merge that somehow onto the actual ultimate query?

Like is this a pattern that is idiomatic and isn't something inadvisable?

import { deepmerge } from "deepmerge-ts"
import { relations } from "drizzle-orm";
import { pgTable, text, uuid } from "drizzle-orm/pg-core";
import { drizzle } from 'drizzle-orm/node-postgres';

const users = pgTable("users", {id: uuid("id").primaryKey(), name: text("name")})
const posts = pgTable("posts", {id: uuid("id").primaryKey(), author_id: uuid("author_id"), title: text("title"), body: text("body")})
const usersRelations = relations(users, ({many}) => ({posts: many(posts)}))
const postsRelations = relations(posts, ({one}) => ({posts: one(users, { fields: [posts.author_id], references: [users.id]})}))

const client = {} as any; // testing
const db = drizzle(client, {schema: {users, posts, usersRelations, postsRelations}})

type FindUsersQueryParams = Parameters<typeof db.query.users.findMany>[0];

// for one component
const toQuery1 = {columns: {id: true, }, with: {posts: {columns: {id: true, title: true}}}} satisfies FindUsersQuery
function Query1Component(props: {data: Awaited<ReturnType<typeof db.query.users.findMany<typeof toQuery1>>>}) {
    return props.data.map(user => <div key={user.id}>{row.posts.map(post => <div key={post.id}>{post.title}</div>)}</div>)
}

// for another component
const toQuery2 = {columns: {id: true, name:true}, with: {posts: {columns: {body: true}}}} satisfies FindUsersQuery
function Query2Component(props: {data: Awaited<ReturnType<typeof db.query.users.findMany<typeof toQuery2>>>}) {
    return props.data.map(user => <div key={user.id}>{row.posts.map(post => <div key={post.id}>{post.body}</div>)}</div>)
}

// when ultimately fetching the data
const result = await db.query.users.findMany(deepmerge(toQuery1, toQuery2))

// then pass the result down to the components as needed
<Query1Component data={result} />
<Query2Component data={result} />

This loses that "masking" aspect of it (so components can improperly re-use data from the other dependent queries, I assume there's no way around that) but it seems like the general pattern would work.

Thanks!