How to transfer a relay request from TypeScript to ES5?

Question

I am writing a web application in TypeScript. The app uses React and Relay from Facebook. My TypeScript source code is compiled into ES6 code using the TypeScript TSC compiler. Then, the ES6 code is passed to the ES5 code using Babel. For Relay to work in a browser, the Babel plugin must convert Relay GraphQL queries: https://facebook.imtqy.com/relay/docs/guides-babel-plugin.html . The problem is that since TSC first forwards these requests, the Babel Relay plugin no longer recognizes them, so they are not passed to something that the browser understands, so the browser throws an error:

Unopened Invariant Violation: RelayQL: An unexpected call at runtime. Either the Babel transform has not been configured, or it does not identify this call site. Make sure it is used verbatim Relay.QL.

My TypeScript source code:

const SiteQuery = {
    store: () => Relay.QL`query { site }`
};

... this compiles TSC into something like this:

var SiteQuery = {\r\n    store: function () { return (_a = [\"query { site }\"], _a.raw = [\"query { site }\"], Relay.QL(_a)); var _a; }\r\n};

... instead of something like this (because the Babel Relay plugin is not doing its job properly):

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            };

This is due to the fact that the Babel Relay plugin does not recognize the converted version and, as a result, does not translate the request into something that the browser understands.

How to do it?

Answer 1

Typescript, ES6, Babel babel-relay-plugin es2015, ES5 .

Webpack . :

• http://www.jbrantly.com/typescript-and-webpack/
• http://www.jbrantly.com/es6-modules-with-typescript-and-webpack/

Babel 5.x, es2015, , Babel ES6- ES6.

Answer 2

, , , .

• babel-relay-plugin. , npm babel-relay-plugin-loader, schema.json package.json. : { "metadata": { "graphql": { "schema": "./schema.json" } } }

• babel. :

  {    "passPerPreset": true,    "": [      "",      "Es2015",      "-0"   ],    "": [          "---"       ]   } },

• tsconfig "es6" - . ts-loader es6, Babel transpile es5.

• , -. , . , :

  : [ {   test:/.tsx?$/,   :/node_modules/,   : "-! babel! ts-loader", }, ],