Relay-compiler-language-typescript: [experimental] Cannot infer fragment type from query

[janicduplessis]

Not sure if this is a limitation of typescript but it seems like it cannot infer fragment types from a query response.

const data = useLazyLoadQuery<SubmitTagsScreenQuery>(graphql`
    query SubmitTagsScreenQuery {
      viewer {
        ...SubmitTagsScreen_viewer
      }
    }
  `);
  const viewer = useFragment(
    graphql`
      fragment SubmitTagsScreen_viewer on Viewer {
        ...
      }
    `,
    data.viewer,
  );

(property) viewer: {
    readonly " $fragmentRefs": FragmentRefs<"SubmitTagsScreen_viewer">;
}
No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ readonly " $fragmentRefs": FragmentRefs<"SubmitTagsScreen_viewer">; }' is not assignable to parameter of type 'readonly { readonly ' $data'?: unknown; }[]'.
      Type '{ readonly " $fragmentRefs": FragmentRefs<"SubmitTagsScreen_viewer">; }' is missing the following properties from type 'readonly { readonly ' $data'?: unknown; }[]': length, concat, join, slice, and 18 more.ts(2769)
useFragment.d.ts(36, 17): The last overload is declared here.

Adding an annotation to useFragment does fix it

const viewer = useFragment<SubmitTagsScreen_viewer$key>(
...

[renanmav]

I think this issue is aimed to @types/react-relay on DefinitelyTyped

[janicduplessis]

The problem is that the generated type for queries only contains $fragmentRefs and the one for the generic parameter of useFragment only $data meaning there is no overlap between the types which causes the error.

[alloy]

Off-hand, I'd say we need to expand the typing emitted from this plugin for queries to include those new keys.