如何在 TypeScript 中使用 Relay Modern（babel-plugin-relay 和 relay-compiler）？

Posted 2023-03-08

【中文标题】如何在 TypeScript 中使用 Relay Modern（babel-plugin-relay 和 relay-compiler）？

【英文标题】：How to use Relay Modern (babel-plugin-relay and relay-compiler) with TypeScript?

【发布时间】：2017-10-15 16:38:16

【问题描述】：

使用 TypeScript 时，babel-plugin-relay 和 relay-compiler 不会解析我们的 graphql 调用。我们的 TS 生成的 JS 文件如下所示，针对 ES2015：

var mutation = compat_1.graphql(_templateObject2);

relay-compiler 的输出如下所示，表明没有文件被解析：

Parsed default in 0.05s Writing default Writer time: 0.05s [0.05s compiling, 0.00s generating, 0.00s extra] Unchanged: 0 files Written default in 0.07s

我们怎样才能让relay-compiler和babel-plugin-relay在这些文件上正常运行？

【参考方案1】：

插件和编译器都需要裸 graphql 调用才能正常工作。如果 graphql 调用接受一个对象（如上面采用 _templateObject2）或在另一个对象上调用（如在上面的 compat_1 上调用），则这两种工具都不起作用。

为了解决这个问题，我们只是使用旧式 require 语句，以便 TS 转译器输出普通的 graphql 调用：

const commitMutation, graphql = require('react-relay/compat');

完美运行。