Relay Modern: Migration to Typescript

Sibelius Seraphini
3 min readDec 28, 2018

--

Relay Modern: Flow -> TS

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:
  • 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/

--

--