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"
      }
    ]
  ]
}