How to have typed fragments?

[davidparys]

Hi,

Let's pretend the following code:

<!-- ./pages/index.vue -->

<script lang="ts" setup>
const { data } = await useAsyncGql({
  operation: 'getProducts',
})
</script>

<template>
  <UContainer>
    <h2 class="font-accent font-bold text-2xl mb-4">
      Our latest Products
    </h2>
    <div class="flex gap-8 flex-wrap justify-between">
      <div v-for="product in data.products?.nodes" :key="product.id" class="rounded-md">
        <img :src="product.image?.sourceUrl" class="object-cover rounded-md">
        <h3 class="font-bold text-lg mt-2">
          {{ product.name }}
        </h3>
        <p class="text-neutral-600">
          {{ product.description }}
        </p>
        <p class="text-primary-600 font-bold mt-2">
          {{ product.price }}
        </p>
      </div>
    </div>
  </UContainer>
</template>

With the following gql query

# ./queries/getProducts.gql

query getProducts($after: String, $slug: [String], $first: Int = 9999, $orderby: [ProductsOrderbyInput] = { field: DATE, order: DESC }) {
  products(first: $first, after: $after, where: { categoryIn: $slug, typeNotIn: EXTERNAL, visibility: VISIBLE, minPrice: 0, orderby: $orderby, status: "publish" }) {
    nodes {
      name
      description
      image {
        altText
        mediaItemUrl
      }
      ...SimpleProduct

    }
  }
}

And simple product being a fragment

# ./queries/fragments/SimpleProduct.gql

fragment SimpleProduct on SimpleProduct {
  price
}

how come product.price does not exit on this type? What am I missing?

All the queries from outside the fragment are typed correctly.