TypeScript with Relay：无法解析生成的模块

Question

在我的MessageItem.tsx组件中，我有以下代码：

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

在运行relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__ ，会生成一个名为MessageItem_message.graphql.ts的模块。

但是当我运行该应用程序时，它给了我一个错误：

编译失败。

./src/components/MessageItem.tsx

找不到模块：无法解析'./__generated__/MessageItem_message.graphql'

原因是只有 src 根目录下的组件可以引用正确的路径（ ./__generated__ ），而文件夹中的组件实际上需要引用路径（ ../__generated__ ），但事实并非如此。

如何配置路径？

Answer 1

从中继编译器选项中删除“--artifactDirectory ./src/__generated__”。

默认情况下，Relay 编译器似乎在包含 GraphQL 的任何源代码的目录中放置了一个“__generated__”目录。

因此，源代码层次结构中任何位置和任何级别的任何“./__generated__”引用现在都可以正常工作。

感谢@ThibaultBoursier 提供指针。

PS 我想知道 --artifcactDirectory 选项是否仅用于更改工件目录的名称，而不是其位置？

Answer 2

就在几分钟前，我遇到了同样的问题。 原因是relay-compiler使用artifactDirectory设置来决定将生成的文件放在哪里，但是暴露graphql标签的babel-plugin-relay需要获得完全相同的参数，否则它只会尝试包含一个并置的相关文件.

在我的情况下，我通过使用babel-plugin-macros.config.js文件配置插件来修复它，如下所示（其中artifactDirectory与提供给relay-compiler ）：

module.exports = {
    relay: {
        artifactDirectory: "./src/ui/graphql/types",
    },
};

此解决方案假定您通过babel-plugin-macros ，否则您可能需要通过.babelrc文件提供该参数，但不幸的是我没有这方面的经验。

Answer 3

编辑.babelrc以指向 artifactDirectory

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