релейный компилятор не может извлекать и использовать запросы graphql в Typescript - PullRequest
Новая
       33

релейный компилятор не может извлекать и использовать запросы graphql в Typescript

0 голосов
/ 24 апреля 2019

Я пытался использовать relay с Typescript реагирующим стартером , и столкнулся с несколькими проблемами.

Похоже, что babel-plugin-relay не в состоянии воспринимать операторы graphql, извлеченныереле-компилятор.Вот мой скрипт компилятора 

"relay": "relay-compiler --src ./src --schema ./src/schema.graphql --extensions=tsx --watchman false".

.babelrc 

{
   "babel": {
   "presets": [
      "react-app"
   ],
   "plugins": [
     "relay"
   ]
}

Это моя ошибка, которая указывает на проблему с трансплантацией Вавилона 

graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `graphql`.

1 Ответ

0 голосов
/ 24 апреля 2019

По сути, проблема решается вокруг извлечения тегов GraphQL из машинописного текста во время преобразований. Я нашел решение благодаря работе в этих PR # 1710 и # 2293 .

Вот шаги:

Измените конфигурацию веб-пакета, включив в нее загрузчик babel (только для запуска машинописи есть ts-загрузчик). 

    ...
    test: /\.(ts|tsx)$/,
    include: paths.appSrc,
    exclude: /node_modules/,
    use: [
       { loader: 'babel-loader' },
       {
         loader: require.resolve('ts-loader'),
         options: {
            transpileOnly: true,
         },
       },
    ],
    ...

Измените конфигурацию target и module в tsconfig на es2015

...
"target": "es2015",
"module": "es2015",
...

Добавить relay-compiler-language-typescript

yarn add relay-compiler-language-typescript -D

Также добавьте babel-plugin-transform-es2015-modules-commonjs. 

yarn add babel-plugin-transform-es2015-modules-commonjs -D

Поскольку теперь мы нацелены на es2015, этот плагин необходим для поддержки операторов ES module import и export.

И скрипт для компиляции операторов graphql 

"relay": "relay-compiler --src ./src --schema src/schema.graphql --language typescript --artifactDirectory ./src/__generated__ --watch"

Укажите плагин реле для использования артефактов, сгенерированных вышеуказанной командой в .babelrc

"plugins": [
    "transform-es2015-modules-commonjs",
    ["relay", { "artifactDirectory": "./src/__generated__" }],
 ],
...