What passes to the child component: FragmentOf or ResultOf?

[Danbka]

In the example, PokemonItem gets data of type FragmentOf, and then we need to read the fragment:

interface Props {
  data: FragmentOf<typeof PokemonItemFragment> | null;
}

....
const PokemonItem = ({ data }: Props) => {
  const pokemon = readFragment(PokemonItemFragment, data);
....
};

Wouldn't it be better to pass the result and read a fragment in the parent component, something like this:

interface Props {
  data: ResultOf<typeof PokemonItemFragment> | null;
}

PokemonList.tsx:

return (
    <ul>
          {data.pokemons.map((pokemon, index) => (
            <PokemonItem data={readFragment(PokemonItemFragment, pokemon)} key={pokemon?.id || index} />
          ))}
        </ul>
  );

Is it just a matter of taste or there are some benefits to passing FragmentOf to the child component? What do you think?

[kitten]

This is all explained on our docs page on Fragment Colocation: https://gql-tada.0no.co/guides/fragment-colocation/

The first thing of note is, you can unmask fragments. Then the parent document that spreads the fragment will see its full selection type as well.

With masked fragments however, the entire point is that:

• the parent can't see the fragment's selection
• the child that defines the fragment receives a masked "ref" type that the parent contains
• the child then unmasks the fragment

The purpose of this is isolation and enforcing good data dependency practices

[Danbka]

Thank you for a quick reply. Probably, I have to read it once again, it wasn't clear to me.