facebook/relay

Satisfies type assertion for typescript break with `useImportTypeSyntax: true`

Opened this issue · 2 comments

This is a file generated in my project with, relay 18.1.0 and "useImportTypeSyntax": true in relay.config.json

// MediaCover_media.graphql.ts
import type { ReaderFragment } from 'relay-runtime';
import type { FragmentRefs } from "relay-runtime";
import type { src as mediaCoverImageSrcResolverType } from "../lib/media/src";
// Type assertion validating that `mediaCoverImageSrcResolverType` resolver is correctly implemented.
// A type error here indicates that the type signature of the resolver module is incorrect.
(mediaCoverImageSrcResolverType satisfies (
  rootKey: src_mediaCover$key,
  args: {
    extraLarge: boolean | null | undefined;
    large: boolean | null | undefined;
  },
) => string | null | undefined);

This code leads to runtime error
ReferenceError: mediaCoverImageSrcResolverType is not defined

It happens because (mediaCoverImageSrcResolverType satisfies ... is transpiled to mediaCoverImageSrcResolverType by typescript
but import type { src as mediaCoverImageSrcResolverType } from "../lib/media/src"; gets dropped at runtime

It's not possible to use satisfies between two types, only a value and a type.

The solution is to make this import without type keyword

import type { src as mediaCoverImageSrcResolverType } from "../lib/media/src";

Related to: #4797 #4772

Thanks for the report. cc @drewatk

This bug is expected to be looked at in about 2 weeks.