[client-preset] Best practice for child-to-parent communication using fragment masking

[Soren-Knudsen]

I started using the client-preset in my Vue application with the Apollo client. I have read the articles about the client-preset, but they only mention how you parse the props down to your subcomponents (with examples).

What is the best practice for child-to-parent communication e.g. emitting events upstream? Can you provide some clarity on that matter (Code examples would be nice).

Usecase

Structure: List -> Item

List.vue

const ListFragment = graphql(/* GraphQL */ `
  fragment GroupsList_List on Foo {
    id
    items {
      ...ItemFragment
    }
  }
`);

export interface Props {
  items: FragmentType<typeof ListFragment>;
}

const props = withDefaults(defineProps<Props>(), {
  items: undefined
});

const onSelect = (item: any) => {  // Best way to make this typesafe? 
   console.log('selected') 
}
...

<Item v-for="item of props.items" item="item" @select="onSelect" />

...

Item.vue

const ItemFragment = graphql(/* GraphQL */ `
  fragment ItemFragment on Bar {
    id
    name
  }
`);

export interface Props {
  item: FragmentType<typeof ItemFragment>;
}

const props = withDefaults(defineProps<Props>(), {
  item: undefined
});

const emits = defineEmits<{
  (eventName: 'selected', value: FragmentType<typeof ItemFragment>): void;
}>();

...

<div @click="emits('selected',  props.item) />

[charlypoly]

Hi!

You will find an answer to a similar question here: #8554 (reply in thread)