[TypeScript] How do we use metafields in useCart, useCartLine and useProduct hooks?

[andershagbard]

How do we use metafields, and other fields, which are not typed by the types from Shopify? The best method I have found is using

const data = useHook() as CodegenGeneratedType`

const CartItem: React.FC<Props> = ({ className, ...props }) => {
  const line = useCartLine() as CartFragmentFragment['lines']['edges'][number]['node'];

Is there a better, more sensible approach?

[wizardlyhel]

I am not too sure what you mean. Metafields are typed https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen-react/src/storefront-api-types.d.ts#L4497-L4525

[andershagbard]

I understand that metafields are typed. What is the best approach to "attach" them to a hook, e.g. useProduct() hook?

[wizardlyhel]

I'm not sure what you mean by "attach" them to a hook. Do you mean by ...

1. if you have a product query that have a metafield like

   product(handle: $handle) {
     metafield(...){...}
   }
   

   when using useProduct, you want to be able to get the metafield like ..

   const {product} = useProduct();
   console.log(product.metafield); // Are you saying this is not typed?
   

   or are you saying you want to be able to use the metafield like ...

   const {metafield} = useProduct();
   console.log(metafield); // This is a feature request. Happy to accept PR
   

2. Or ... you have a product query that have a metafield like

   product(handle: $handle) {
     specialInfo: metafield(...){...}
   }
   

   and you want the renamed field to be typed?

   const {product} = useProduct();
   console.log(product.specialInfo);
   

   Also happy to accept PR for this .. most likely be looking at accepting a type with useProduct hook like useProduct<MyProductType>()

In any case, the type casting solution you have is probably the best workaround solution for now.