Relay with drawer

September 5, 2016

Relay is a good technology to use in combination with GraphQL for React Native. However, because of the way it is implemented, it is very difficult to use.

One of the main problem with Relay is the use of Babel Relay Plugin. This plugin is necessary for Relay to be able to convert Relay.QL statement into pure JS.

I was having the hardest time trying to get Relay working with React Native Drawer because of this plugin. I needed the drawer in order to have good UX, and Relay for the communication to server. After almost 2 weeks of trial and error, I finally came across babel-relay-plugin-loader which is some sort of wrap over babel-relay-plugin which will play nice with Babel. It allows me to write .babelrc as

{
  "plugins": [
    "babel-relay-plugin-loader"
  ]
}

instead of

{
  "passPerPreset": true,
  "presets": [
    {"plugins": ["./plugins/babelRelayPlugin"]},
    "react-native"
 ]
}

So now I’ve created a template project, RN-relay-drawer-template, so that I have reference for my next project needing Relay. This also includes react-native-route-flux for easy routing.