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:
--language typescriptargument 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.
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 brings a lot of new concepts to the frontend development table.
Relay Modern — What is a Fragment?
A fragment is the building block of Relay Modern. A fragment enables a component to declares which data is requires.
Relay Modern Network Deep Dive
Data fetching is a hard problem. How to ask data to a server? When to ask data to server? How to make sure you have all…
Relay Modern @argumentDefinitions
Relay Modern provides some experimental directives to make it easy to solve some common patterns.
There are a lot of advice to have dumb and smart components when using pure React, or React with Redux/Mobx.
Relay Modern — Optimistic Update
Relay Modern provides an update way that solves the delay to update client data from server response.
Wrangling the client store with the Relay Modern updater function.
In this post I’m going to provide some examples and patterns around RelayModern’s documentation on the store…
Relay modern pagination using Refetch container
There is simple way to use Refetch container as Pagination container. It took me a while to get my head around…
Relay is just getting better : )
In a recent commit to Relay 1.2, it was added a third argument to refetchConnection, the refetchConnection is an API…
Subscribe to my newsletter for new content https://sibelius.substack.com/