Relay-compiler-language-typescript: Not working with CreateReactApp

[cberkom]

So, I'm trying to get this working with CreateReactApp and running into some issues.

Typescript is complaining about the graphql.ts artifacts, lots of errors like this:

Given that this is a CreateReactApp which hasn't been ejected, I had to make these exceptions to these instructions:

I'm still compiling the artifacts into the subfolders rather than the root directory because CreateReactApp doesn't allow .babelrc.

package.json:

"relay": "relay-compiler --src ./src --schema ./../components/api/app/assets/javascripts/api/relay/schema.json --language typescript",

tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext", // CreateReactApp won't let me change this
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

Hoping to find a workaround without ejecting my app; any insight into what causes these errors?

[cberkom]

If I exclude the artifacts in my .tsconfig, it works, but not sure if that's intended.

"exclude": [
    "**/__generated__"
  ]

Sorry, new to typescript, let me know if I'm doing something stupid.

[kastermester]

I think https://github.com/relay-tools/relay-compiler-language-typescript/pull/83 might solve the actual problem you're running into.

Besides that, here's a few notes:

Not using the single artifact directory should work just fine - but this will disable typechecking that the relay data you pass between components is actually correct (ie. you can now pass data to a component that has not had its data fetched). I understand the issue you run into here, but aside from working with the CRA team I'm not sure what we can do here.

Excluding the __generated__ directories from the TS compilation I would expect would stop the typechecker from working with those files. Can you import the files and get autocompletion in your components with this setup?

[alloy]

I don’t have personal experience with CRA, but iirc there’s a project called babel-macros that would allow Babel configuration with CRA. (I don’t have fine to dive into that right now, but would welcome any patches necessary to make it work with that setup.)

[cberkom]

@kastermester You're correct that excluding the __generated__ directory broke autocompletion in my editor. I've reverted that change.

It looks like #83 hasn't been released yet, but I was able to get it working in the meantime by setting "noImplicitAny": false in .tsconfig. I recognize that this lowers the type-safety bar a bit.

@alloy Yes, we're using babel-plugin-relay/macro. It sounds like the only change needed is to point it at a different artifact directory?

[alloy]

Unsure. What I meant more is that if we can support CRA through Babel-macros (I don’t even know what they do exactly) then that would be great.

[sgwilym]

Bumped into this problem myself today. I've opened a PR that allows you to configure babel-plugin-relay options through the macro, but it's a change that has to be made on the plugin itself: https://github.com/facebook/relay/pull/2646

[spiegela]

@sgwilym It looks like your change to configure babel-plugin-relay/macro got merged. Do you have an example of this with relay-compiler-language-typescript? I'm also running into issues with a CRA-2 app.

[sgwilym]

@spiegela The only issue I bumped into using CRA with relay-compiler-language-typescript was setting the location of the artifacts directory. With the change I made, all I've had to do is add the following to my package.json:

"babelMacros": {
    "relay": {
      "artifactDirectory": "./src/__generated__"
    }
  }

(you can also configure this in other places according to your taste – more detail on that in the PR).

[sibelius]

can we close this?

check a working example here https://github.com/sibelius/create-react-app-relay-modern

[alloy]

You’re not actually using these settings in that example app, right? In any case, yeah feels like we can close this by now 👍

[spiegela]

Well, I checked the sample app, and it doesn't seem to relate to this issue. I know I came in late on this issue, but I'm experiencing the same result. However, this doesn't seem to be an issue with relay-compiler-language, rather I haven't gotten babel-plugin-relay/macro to recognize my artifactDirectory setting, yet-- I've tried various methods described in the links above.

I'll take this up with babel-plugin-relay, but out of curiosity is there a hard dependency for relay-compiler-language on a _specific_ artifactDirectory for the generated ts files? My issue would also be solved if the default behavior of babel-plugin-relay/macro matched the default behavior of relay-compiler: placing the generated files in __generated__ directories in the same directory as the source file.

[alloy]

@spiegela Thanks for the update! @sibelius Any chance you could update your example to use these macro settings?

As for the other question, please see this section of the type emission part of the Relay docs: https://facebook.github.io/relay/docs/en/type-emission.html#single-artifact-directory

[sgwilym]

@spiegela by the way, even though my changes have been merged, there’s not been a release including them yet!

[spiegela]

🤦‍♂️ Of course! I don't know why I didn't check to see if it was in a release. I'll take a look and see if I can test with babel-plugin-relay from master.

[RichardLindhout]

Fix graphql errors with this
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35707