TypeScript with Relay: Can't resolve generated module

Question

In my MessageItem.tsx component I have the following code:

const data = useFragment(
    graphql`
      fragment MessageItem_message on Message {
        date
        body
      }
    `,
    message as any
  );

After running relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, a module named MessageItem_message.graphql.ts gets generated.

But when I run the app it gives me an error:

Failed to compile.

./src/components/MessageItem.tsx

Module not found: Can't resolve './__generated__/MessageItem_message.graphql'

The reason is only components at the src root can refer to the right path (./__generated__), whereas components in a folder actually need to refer to the path (../__generated__) but it's not doing so.

How can I configure the path?

Answer 1

Edit .babelrc to point to the artifactDirectory

// .babelrc
{
  "plugins": [
    [
      "relay",
      {
        "artifactDirectory": "./src/ui/graphql/types"
      }
    ]
  ]
}