Doesn't seem to work with create-react-app

[Eliya Cohen]

I did the following steps:

1. yarn add graphql @ts-gql/tag @ts-gql/eslint-plugin @ts-gql/compiler @ts-gql/babel-plugin
2. modify eslintConfig in package.json:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "@ts-gql/ts-gql": "error"
    },
    "plugins": [
      "@ts-gql"
    ]
  },

3. add ts-gql to package.json as well:

  "ts-gql": {
    "schema": "../server/schema.graphql"
  }

4. 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]

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"))
);