[client-preset]: Nested fragments with same type

[paul-vd]

With the nested fragments example: https://github.com/charlypoly/codegen-repros/blob/master/client-preset-nested-fragments-interface/src/App.tsx is it possible to use fragments with the same __typename, for example

const movieItemFragment = graphql(/* GraphQL */ `
  fragment MovieItemFragment on Movie {
    id
    title
  }
`);

const relatedFragment = graphql(/* GraphQL */ `
  fragment RelatedMoviesFragment on Movie {
    foo
    related {
      ...MovieItemFragment
    }
  }
`);

const upsellFragment = graphql(/* GraphQL */ `
  fragment UpsellMoviesFragment on Movie {
    bar
    upsells {
      ...MovieItemFragment
    }
  }
`);

const movieDetailsFragment = graphql(/* GraphQL */ `
  fragment DetailsFragment on Movie {
    ...MovieItemFragment
    ...RelatedMoviesFragment
    ...UpsellMoviesFragment
  }
`);

const moviesQueryDocument = graphql(/* GraphQL */ `
  query Movie($id: ID!) {
    movie(id: $id) {
      ...DetailsFragment 
      __typename
    }
  }
`);

Above you can that the RelatedMoviesFragment and the UpsellMoviesFragment are also on the Movie type, so the __typename check will no longer work

  const movieDetails = getFragmentData(movieDetailsFragment , data?.movie);
  const movie =
    movieDetails && movieDetails .__typename === "Movie"
      ? getFragmentData(movieFragment, movieDetails)
      : null;

I would expect to be able to do something like this, but it does not seem to work, as upsells and and related no longer exist on MovieFragment because they are not literal unions, for example the foo and bar keys will also not exist

  const relatedMovies= makeFragmentData(
    relatedFragment,
    videoDetail?.related // this key will not exist in the typings
  );
  const upsellMoviesFragment = makeFragmentData(
    upsellFragment,
    videoDetail?.upsells// this key will not exist in the typings
  );

[paul-vd]

Also while debugging this, should the fragment not be the last parameter, but in the example, it's the first, but when checking the types generated from makeFragmentData, the first parameter is data

export function makeFragmentData<
  F extends DocumentNode,
  FT extends ResultOf<F>
>(data: FT, _fragment: F): FragmentType<F> {
  return data as FragmentType<F>;
}

[saihaj]

you will not have a JS way to know which type you are checking but with TypeScript it will be able to differentiate the difference in typings.