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

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

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

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

.babelrc

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

Это моя ошибка, которая предполагает проблему с транспиляцией Babel.

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`.

reactjs typescript relayjs relaymodern
person Giridhar Karnik    schedule 24.04.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Вот шаги:

Измените конфигурацию веб-пакета, чтобы включить загрузчик babel (стартер typescript имеет только 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, этот плагин необходим для поддержки операторов import и export модуля ES.

И скрипт для компиляции операторов 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__" }],
 ],
person Giridhar Karnik    schedule 24.04.2019
comment
Проблема в том, что теперь нельзя использовать модули, использующие модульную систему commonjs. Например, теперь машинописный текст орет на меня, что не может найти модуль antd: import { Form, Input, Button } from 'antd' - person Anton Kuzmin; 09.06.2019
comment
Чтобы решить эту проблему, мне пришлось установить moduleResolution: node в tsconfig.json. - person Anton Kuzmin; 09.06.2019

arrow_upward
0
arrow_downward

Мой .babelrc выглядит так

{
    "plugins": [
        [
            // Please note that the "relay" plugin should run before other plugins or presets to ensure the graphql template literals are correctly transformed. See Babel's documentation on this topic.
            "relay",
            {
                "artifactDirectory": "./src/__generated__"
            }
        ],
        [
            "transform-es2015-modules-commonjs",
            {
                "allowTopLevelThis": true
            }
        ]
    ]
}

Следуйте инструкциям по настройке здесь https://github.com/relay-tools/relay-compiler-language-typescript#typescript

который свяжет вас с документацией Babel https://babeljs.io/docs/en/babel-plugin-transform-es2015-modules-commonjs/

это, кажется, работает. мой скрипт npm

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

и tsconfig.json содержит это

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

Обновлять

Мне пришлось установить babel-plugin-relay, как описано здесь https://create-react-app.dev/docs/adding-relay/

и взломать типы машинописных текстов для него https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35707

person Joey Gough    schedule 25.05.2020