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

Question

When using TypeScript, babel-plugin-relay and relay-compiler are not parsing our graphql calls. Our TS-generated JS files look like this, targeting ES2015:

var mutation = compat_1.graphql(_templateObject2);

And our output from relay-compiler looks like this, indicating that no files were parsed:

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

How can we get relay-compiler and babel-plugin-relay to operate properly on these files?

Answer 1

Both the plugin and the compiler need bare graphql calls to work properly. If the graphql call takes an object (as the above takes _templateObject2 ) or is called on another object (as it's called on compat_1 above), neither tool will work.

To fix, we're just using an old-style require statement so that the TS transpiler outputs plain graphql calls:

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

Works perfectly.