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

Posted 2023-03-08

【中文标题】带有 Relay 的 TypeScript：无法解析生成的模块

【英文标题】：TypeScript with Relay: Can't resolve generated module

【发布时间】：2020-06-30 15:32:01

【问题描述】：

在我的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__）但它没有这样做。

如何配置路径？

【问题讨论】：

这个问题你可以看看：github.com/relay-tools/relay-compiler-language-typescript/…

@StanleyLuo 这方面有什么进展吗？我尝试设置绝对路径并在整个过程中进行配置，但仍然存在同样的问题。

【参考方案1】：

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

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

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

感谢@ThibaultBoursier 的指点。

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

【参考方案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 文件提供该参数，但遗憾的是我没有这方面的经验。

【参考方案3】：

编辑.babelrc 以指向工件目录

// .babelrc

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