Relay Modern: Migration to Typescript
At Entria Tech we are migrating from FlowType to Typescript (read more about it here https://medium.com/entria/incremental-migration-to-typescript-on-a-flowtype-codebase-515f6490d92d). Migrating Relay to Typescript was the next step for our codebase.
Relay Modern Typescript story
To enable Relay Modern support emitting Typescript types for fragments we needed Babel 7, as it support parsing Typescript files as well.
Eloy “Durán” Durán from Artsy made an outstanding work on setting up the Language Plugin Support infrastructure for Relay Modern - https://github.com/facebook/relay/pull/2293. This also enable Relay Modern to emit types for Reason and other scenarios as well.
They also made a plugin to Typescript, check the code here https://github.com/relay-tools/relay-compiler-language-typescript. So all the building blocks to use Relay Modern with Typescript was all set.
Relay Modern Typescript migration
The hardest part of this migration was to do it in an incremental way. We would need to create a new plugin that emits both Flow and Typescript types for fragments.
However, we decided to migrate one of our smallest frontend all at time to see if we going to have any regression and if migrating all at once would be a great idea.
We are using Relay 1.7.0 version, but you can try with 2.0.0-rc.1 as well. Here are the steps for the migration:
- install
relay-compiler-language-typescript
latest version - add
--language typescript
argument to your relay compiler command
- remove all old __generated__ folders:
- transform all .js files to .tsx files (you can try this one https://github.com/bcherny/flow-to-typescript and https://github.com/lyft/react-javascript-to-typescript-transform to improve this conversion):
- regenerate all of them
After that, we recompiled our frontend and everything was working great. We're going to improve type checking of it in following pull requests.
What's next?
Typescript will make our frontend safer.
I can do a blog post of how to properly type your Relay Modern app and how to use some Typescript features like non null assertions where you are sure the type won't be non null.
I'd like to see a relay compiler plugin for Reason.
Ping me on twitter if you have any questions https://twitter.com/sseraphini
Read more about Relay Modern here:
Newsletter
Subscribe to my newsletter for new content https://sibelius.substack.com/