Relay Modern: Migration to Typescript

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:

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

Relay Modern: the Relay Store

Relay Modern — What is a Fragment?

Relay Modern Network Deep Dive

Relay Modern @argumentDefinitions

Relay/Apollo anti-pattern

Relay Modern — Optimistic Update

Wrangling the client store with the Relay Modern updater function.

Relay modern pagination using Refetch container

Relay is just getting better : )

Newsletter

Subscribe to my newsletter for new content https://sibelius.substack.com/