Add relay

[kevinhughes27]

part of #750 This PR adds Relay.

Background

Relay is a library from Facebook that does some really cool things. With Relay you specify the data your React component needs as a graphql fragment then Relay builds all the queries in a optimised way. Where it gets really cool is that when the user interacts with the app and new components are rendered Relay figures out only what new data is required and fetches it. Relay caches data as well so it doesn't need to re-fetch redundantly which will make the app fast to navigate around.

Note: Relay just underwent a big re-write and there is a lot of old information on the internet. People seem to be referring to the new version as Relay Modern.

Edit: Relay is a bit less magic than I thought and you still have to compose the queries yourself. Its still a nice pattern though

Changes

Adding Relay to the app was a bit complicated because of how create-react-app works. Unfortunately it is not possible to extend the configuration from create-react-app without ejecting and then maintaining all of the configuration. This is why I was already using a forked version to add typescript support.

I first tried this to essentially monkey patch our config to include relay but I couldn't get it working and it was a bit sketchy.

Then I came across react-app-rewired which is basically a high quality monkey patch that is maintained at least (custom configuration might be coming to create-react-app 2 as well and they know this is a pain point). They had some existing config for relay but not relay modern. I found this issue sharing a solution for relay modern.

I also noticed they were using a rewire for Typescript support as well. It uses the latest version of create-react-app and I didn't like the idea of running rewire on top of a forked create-react-app even though rewire does support this. The Typescript rewire is only using babel so typechecking is not done as part of the build anymore. It still shows in the editor and we can run the check as a standalone script still.

And the issues didn't stop there! Modern frontend is such a mess! When moving the queries into actual components I ran into the problem that the relay-compiler would crash. I traced this down to the parser not liking the public keyword from Typescript. I spent some time trying out modified relay-compilers that know how to parse typescript (https://github.com/secoya/typescript-relay-modern and https://github.com/relay-tools/relay-compiler-language-typescript/tree/master/example) but ran into more errors. Then I stepped back and realised I could remove the public keyword since it is implicit and then relay would compile. This also means for the time being our generated relay queries don't include types which makes the whole typescript thing a bit silly. Looks like this will be fixed properly soon though facebook/relay#2293.

References:

• http://rmosolgo.github.io/blog/2017/03/16/tracking-schema-changes-with-graphql-ruby/
• https://github.com/secoya/typescript-relay-modern
• https://github.com/gauravtiwari/relay-rails-blog