[client-preset] @skip & @include don't generate correct types when put on Fragments

[christiansany]

I've found a bug where the TypeScript Types that are generated with the client-preset (or also without this preset) don't take into consideration when you have @skip or @include on a Fragment.

With the following example, there is no Typescript Error, but there should be, since in the query we're always skipping the Fragment that is required for <Child> to render.

// Product.tsx
import { graphql, useQuery } from "@segments/graphql";
import { FunctionComponent } from "react";
import { Child } from "./Child";

const GetProductData = graphql(`
  query GetProductData {
    product(id: "1319d3as1f442") {
      id
      property1
      property2
      ...ChildFragment @skip(if: true) # 👈
    }
  }
`);

const Product: FunctionComponent = () => {
  const { data } = useQuery(GetProductData);

  if (!data) {
    return null;
  }

  return (
    <>
      {data.product.name}<br/>
     /* 👉 Should a TypeError exist here??? */
      <Child product={data.product} />
    </>
  );
}

// Child.tsx
import { FragmentType, graphql, useFragment } from "@segments/graphql";

const ChildFragment = graphql(`
  fragment ChildFragment on Product {
    brandName
    brandId
  }
`);

type ChildProps = {
  product: FragmentType<typeof ChildFragment>;
};

export const Child = (props: ChildProps) => {
  const product = useFragment(ChildFragment, props.product);
  return (
    <>
      <div>BrandId: {product.brandId}</div>
      {product.brandName && <div>Brand: {product.brandName}</div>}
    </>
  );
};

[saihaj]

Yeah I think this is likely a missing thing and probable is more involved typing is required for generated types. Usually the arguments to the directives are passed at runtime so at build time we cannot really do much. I need to think more and follow other discussions on what can be done here but here I see there is a big discussion #6748

[christiansany]

The arguments passed are at runtime, but the directive itself exists at build time. So the possibility to skip/include a fragment is known when the types are generated.
The type generator actually does understand these directives when you apply them to a Field. A non-nullable Field becomes optional in the generated type when either @skip or @include is applied to that field.