Improve DX around TS Codegen

[blittle]

In building the VariantSelector component I've encountered some issues with our type codegen. For example, say you have a query for a product:

const VARIANTS_QUERY = `#graphql
  query variants(
    $handle: String!
  ) {
    product(handle: $handle) {
      variants(first: 250) {
        nodes {
          ...ProductVariantFragment
        }
      }
    }
  }
  ${PRODUCT_VARIANT_FRAGMENT}
` as const;

Now I'd like to create a component that consumes the type that will be generated for that query. I can import VariantsQuery from 'storefrontapi.generated' to get access to the whole type. But in this case, I really only care about the variants type within the query. But I cannot get at that type easily. For example:

function MyComponent({variants}: VariantsQuery['product']['variants']) {
  ...
}

This will produce an error, because product is not garanteed to be defined. It could be null if an invalid handle is passed in the query. But I still want to get at the generated type underneath the hood if it is defined. How do I do that? In this case, because a fragment is used, the codegen also generates a fragment type ProductVariantFragment. But there isn't always a fragment available. And I found this extremely confusing and difficult to deal with. How could we improve this DX?

[juanpprieto]

TIL the NonNullable utility can help bypass the Maybe. Does this work?

function MyComponent({variants}: NonNullable<VariantsQuery['product']>['variants']) {
  ...
}