How to handle two-way data binding with fragment masking/colocation

[KammererTob]

I am enjoying working with this library, but have a more general question about the best workflow regarding two-way data binding.
Suppose you have the following two components.

1. Trainer.vue

<template>
<div class="column">
  <div class="row heading">{{ trainerModel.person.name }}</div>
  <div class="row">
     <input v-model="trainerModel.license"/>
  </div>
  <div class="row">
     <PersonSelect :model-value="trainerModel.person" @update:model-value="onTrainerPersonUpdated"/>
   </div>
</div>
</template>

<script setup lang="ts">
const TrainerQuery = graphql(`
   query TrainerQuery ($id: ID!) {
       license
       person {
           name
           ...PersonSelectFragment
       }
   }
`, [PersonSelectFragment]);

const trainerModel = useQuery(TrainerQuery, {id: 1});

function onTrainerPersonUpdated(person: ???) {
  trainerModel.person = person; // How can i assign the updated fragmentRef, but also update the properties the parent uses itself?
}
</script>

2. PersonSelect

<template>
  <SelectSearch :model-value="personModel" :options="personOptions" @update:model-value="onPersonUpdated" @filter="onFilter"/>
</template>

<script lang="ts">
export const PersonSelectFragment = graphql(`
    fragment PersonSelectFragment on Person {
        id
        name
        email
    }
`);
</script>

<script setup lang="ts">
const personOptions = ref<ReadonlyArray<ResultOf<typeof PersonSelectFragment>>>();

const FindPersonsQuery =graphql(`
    query FindPersons ($term: String!) {
        persons: findPersons(term: $term) {
             ...PersonSelectFragment
        }
    }
`, [PersonSelectFragment]);

function onFilter(term: string, update: unknown) {
   const res = await useQuery(FindPersonsQuery, {term});

   update(() => personOptions.value = readFragment(PersonSelectFragment, res.data.persons))
}

function onPersonUpdated(person: ResultOf<typeof PersonSelectFragment>) {
    // What do i emit here? maskFragments is discouraged, but i somehow need to update the parent object
}
</script>

This is an imaginary stripped-down example, so it might not be 100% correct or make sense, but it should convey the issue i have.

I am building an Admin UI where data can be edited/changed. In this example you can assign a (different) Person to a Trainer (not really sensible, but an easy example). I've encapsulated the select search/filter for persons in a separate component, since persons can be swapped in multiple places. I think my setup with the fragments in the PersonSelect is correct and makes sense, but i am having trouble with what i should emit back to the parent.
The parent itself uses some properties of the person to display in the UI, so i need to also update those when a Person was updated/selected in the PersonSelect. I think my options are:

1. I could probably emit ResultOf<typeof PersonSelectFragment> and then use the properties to update the parent, but this would require maskFragments to update the :model-value of PersonSelect in the parent
2. I could update the model of the PersonSelect inside the component itself, and only emit some pre-defined properties (a subset of PersonSelectFragment). This would have the advantage that it is clear what properties are there to update, but the disadvantage that the fragmentRef is basically out of sync.

Does anyone have any experience dealing with this kind of issue?
Thanks for taking the time. If you have any questions please let me know.

[kitten]

I'm not sure if I'm 100% following, but trainerModel.person = person seems like a bit of an icky idea to me. That said, I think there's no specific problem here, except that you have, conceptually speaking, a circular fragment dependency.

Meaning, suppose we're trying to fill in person: ???.

The problem is that the sub-component currently uses just PersonSelectFragment to select data.
But the parent component defines name, i.e. its own selection set.

Conceptually speaking, you want to enforce that person: ??? is typed in such a way that reconciles both. This should cause you trouble, basically, because you're trying to reassign trainerModel.person.

So, in my opinion, this is a good limitation, as you're trying to enforce that person (passed upwards) is at least a super-set, of the selection in TrainerQuery.

Basically, though, what I'd do is either:

• unmask the PersonSelectFragment: This would be so that it's easier to enforce that the properties match and reuse the component
• decouple trainerModel.person = person from your local data model: You're basically trying to have a two-way binding, but are constraining yourself by these two fragments having to be the same. The easiest way to solve this is to either make them the exact same or to avoid this upwards assignment. This could for instance be done by modelling the selection into the upper-query itself, or by keeping the data there separate and “down-casting” trainerModel.person to the lower fragment.

[KammererTob]

Thanks for your answer. I agree that there is no problem with the library or how colocation/masking is handled. This was more to maybe get some suggestions how this could be achieved in the context of gql.tada.

Regarding trainerModel.person = person: In the bigger scope this is not very different to how other inputs (i.e. text input) work. It is just a search bar/select where you can select persons. But of course it brings the complexity of fragment masking.

I will look into both of your suggestions, but i feel there is no 100% perfect solution since with unmasking i am probably overfetching while searching for persons (because one parent component needs way more properties than necessary for the search alone), or i am underfetching and not all properties can get updated in parent if another person is selected.
Can you maybe elaborate a bit on the "down-casting" part of your suggestion? I have a hard time imagining what that might entail.

Thank you!