How to type a useState variable with a Fragment? + Fragments rant

[ZakKa89]

First some feedback regarding Fragments:

Since this feature was released, it really complicated the usage of fragments in my opinion: Unleash the power of fragmens

Maybe I was doing something wrong, but because of the fragmentRefs it felt like a lot of extra work to :

• Using the FragmentType helper to type props in components
• On top of that also having to use the useFragment.
• Naming things becomes more complicated, like for example how I cant reuse the name downloads here and I solved it by not destructuring the props before:

const DownloadsSection = (props: {
downloads: FragmentType<typeof BrandDownloadFragment>[]
  sectionTitle: string
}) => {
  const downloads = useFragment(BrandDownloadFragment, props.downloads)

I really preferred how things were before this feature. I needed the type from a fragment? Just import that fragment and I'm done. I disabled fragment masking for now, as per this suggestion: How to disable fragment masking That seems to be working the way I was used to.

Still curious, with fragment masking enabled, how to type a state variable?:

Question: How to type a useState variable with a Fragment?

I tried this:

type Product = FragmentType<typeof ProductFragment>

export const AddProductForm = () => {
  const [selectedProduct, setSelectedProduct] = useState<Product>(null)

But sadly it will have the fragmentRef so I can't really setState. The following results in a type error:

          results.map((result: Product, i) => {
              const product = useFragment(ProductFragment, result)

              return (
                <button onClick={() => setSelectedProduct(product)}>
                     ...
                </button>
              )
            })
      }

So wondering what I was doing wrong and how you would do this?

I also tried using the ProductDetailsFragment directly:

import { ProductDetailsFragment } from '@/types/gql/graphql'

const [selectedProduct, setSelectedProduct] = useState<ProductDetailsFragment>(null)

Which results in this error on the setSelectedProduct:

(parameter) product: {
  __typename?: "Product";
} & {
  ' $fragmentRefs'?: {
      ProductDetailsFragment: ProductDetailsFragment;
  };
}
Argument of type '{ __typename?: "Product"; } & { ' $fragmentRefs'?: { ProductDetailsFragment: ProductDetailsFragment; }; }' is not assignable to parameter of type 'SetStateAction<ProductDetailsFragment>'.

[max-ch9i]

To pass the result of useFragment to the state use DocumentType, e.g.:

type Product = DocumentType<typeof ProductFragment>

export const AddProductForm = () => {
  const [selectedProduct, setSelectedProduct] = useState<Product>(null)

[adriangalilea]

Is this still how it's done?

Oh wait, this is colliding with a DocumentType enum I have internally..