Incremental adoption through multilingual compile (both js/jsx and ts/tsx)

[tslater]

I noticed that relay compiler says that the --language parameter is a string. Trying: ./node_modules/.bin/relay-compiler --src ./screens --schema ./graphql-relay/schema.graphql --language javascript --language typescript --watch I get an error:

Error: Expected plugin to be a initializer function.
    at getLanguagePlugin (/Users/tyler/wordscenes/code/mobile/node_modules/relay-compiler/bin/relay-compiler:8610:13)
    at Object.getCodegenRunner (/Users/tyler/wordscenes/code/mobile/node_modules/relay-compiler/bin/relay-compiler:8740:24)
    at /Users/tyler/wordscenes/code/mobile/node_modules/relay-compiler/bin/relay-compiler:8655:40
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/tyler/wordscenes/code/mobile/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/Users/tyler/wordscenes/code/mobile/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)

Though both compilers work independently. Is there actual support for both?

[renanmav]

I don’t think so. This issue might be better answered by Relay core team in Relay repo.

[sibelius]

you need to run relay-compiler twice

or modify this plugin to be able to handle both typescript and javascript at the same time

[tslater]

@sibelius I thought about that...good idea! but then when I tried it one of the compilers would throw an error saying that the files generated by the other compiler weren't autogenerated. I think we'll just have to alter this plugin pre @renanmav's suggestion, or see how hard it would be to convert all the components containing relay fragments/queries in one bang.

[sibelius]

you need to create a new plugin relay-compiler-language-flow-ts

that brings the flow and typescript at compile both at the same time

all the code needed is on open source, you just need to glue them

https://github.com/relay-tools/relay-compiler-language-typescript/blob/master/src/index.ts#L9

[Traviskn]

After fiddling with the CLI a bit, this variation of the command does seem to support both javascript and typescript in the same project:

relay-compiler --src ./screens --schema ./graphql-relay/schema.graphql --language javascript typescript --extensions js jsx ts tsx --watch

[Traviskn]

OK, after some more experimenting I have some clarification. The relay-compiler CLI only respects the first option passed to the --language flag. So when I used --language javascript typescript it only generated flowtype definitions. If I reverse it --language typescript javascript then only typescript definitions are generated. Adding multiple options has no effect.

The relay compiler only supports generating type definitions for either flow or typescript, not both in a single command. In the case of our project, we didn't use any flow types before, and we are incrementally adding typescript into the project. We can go ahead and generate typescript definitions from all typescript and javascript files by adding to the list of extensions, but in the end we're only getting typescript type definitions output.

Not sure if anyone has a use case for having both flow and typescript types in the same project, but my solution won't support that unfortunately.

[ntf]

For anyone that slowly migrating a javascript project to typescript. This is what you need:

relay-compiler --src ./src --schema ./build-resources/schema.graphql --language typescript --extensions js jsx ts tsx