Doesn't seem to work with create-react-app
Newbie012 opened this issue · comments
Eliya Cohen commented
I did the following steps:
yarn add graphql @ts-gql/tag @ts-gql/eslint-plugin @ts-gql/compiler @ts-gql/babel-plugin
- modify
eslintConfig
in package.json:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"@ts-gql/ts-gql": "error"
},
"plugins": [
"@ts-gql"
]
},
- add
ts-gql
to package.json as well:
"ts-gql": {
"schema": "../server/schema.graphql"
}
- use react-app-rewired and customize-cra in order for the babel plugin to work (spoiler - it didn't work) - config.overrides.js:
const { override, addExternalBabelPlugin } = require("customize-cra");
module.exports = override(addExternalBabelPlugin(require("@ts-gql/babel-plugin")));
The eslint plugin seems to work, as you can see here:
But in runtime, I get the following error:
Uncaught Error: Unexpected runtime `gql` call. `gql` from `@ts-gql/tag` should never be called at runtime. This is likely happening because:
- You haven't included `@ts-gql/babel-plugin` in your Babel config
- This call doesn't have `as import(...)` that should be added by `@ts-gql/eslint-plugin`
Given the following code:
let myQuery = gql`
query MyQuery {
advertisers {
id
name
}
}
`as import("../../__generated__/ts-gql/MyQuery").type;
It transpiles down to:
let myQuery = _ts_gql_tag__WEBPACK_IMPORTED_MODULE_1__["gql"]`
query MyQuery {
advertisers {
id
name
}
}
`;
I'm not sure what went wrong in the process.
Eliya Cohen commented
Turns out I had to use addBabelPlugin
instead of addExternalBabelPlugin
. But if I do so, I get the following error that Relative imports outside of src/ are not supported
. In order to fix this, I had to use react-app-rewire-alias
, like so:
const { override, addBabelPlugin } = require("customize-cra");
const { alias } = require("react-app-rewire-alias");
const aliasMap = {
generated: "__generated__",
};
module.exports = override(
alias(aliasMap),
addBabelPlugin(require("@ts-gql/babel-plugin"))
);