TypeScript で Web アプリを作成しています。アプリは Facebook の React と Relay を使用します。私の TypeScript ソース コードは、TypeScript コンパイラ TSC を使用して ES6 コードにコンパイルされます。次に、Babel を使用して ES6 コードを ES5 コードにトランスパイルします。Relay がブラウザーで機能するには、Babel プラグインが Relay GraphQL クエリを変換する必要があります: https://facebook.github.io/relay/docs/guides-babel-plugin.html。問題は、TSC が最初にこれらのクエリをトランスパイルするため、Babel Relay プラグインがそれらを認識できなくなり、ブラウザーが理解できるものにトランスパイルされないため、ブラウザーがエラーをスローすることです。
キャッチされない不変違反: RelayQL: 実行時に予期しない呼び出しが発生しました。Babel 変換が設定されていないか、この呼び出しサイトを識別できませんでした。として逐語的に使用されていることを確認してください
Relay.QL。
私のTypeScriptソースコード:
const SiteQuery = {
store: () => Relay.QL`query { site }`
};
... これは TSC によって次のようにコンパイルされます。
var SiteQuery = {\r\n store: function () { return (_a = [\"query { site }\"], _a.raw = [\"query { site }\"], Relay.QL(_a)); var _a; }\r\n};
... 次のような代わりに (Babel Relay プラグインが適切に動作しないため):
var SiteQuery = {\n store: function store() {\n return (function () {\n return {\n fieldName: 'site',\n kind: 'Query',\n metadata: {},\n name: 'Router',\n type: 'Site'\n };
これは、Babel Relay プラグインがトランスパイルされたバージョンを認識せず、その結果、ブラウザーが理解できるものにクエリをトランスパイルしないためです。
これを機能させる方法は？