In this series of posts we will explore how to render a React based front end that uses Relay and GraphQl to communicate with a Ruby on Rails server. We will be writing ES6 Javascript that gets transpiled by Webpack into 'regular' javascript. The applicaton can be viewed at toeatapp.startuplandia.io and the codebase can be viewed at github.com/jcdavison/to_eat_app.

This tutorial is aimed at web developers who are comfortable with relational data storage, http/rest ideology and rails and who want to quickly learn some powerful client-side data caching and state management techniques. If you are new to coding and reading this tutorial and lots of things don't make sense, that is ok, just work as far as you can get, submit your commits to antipattern.io and I will give you relevant guidance.

The only file that Rails is requiring that has js application code in it is packed/transpiled_output. This file is created by the WebPack process, which is watching ./app/assets/javascripts/src/app.jsx, anytime a change occurs WebPack converts app.jsx and all includes to one large file packed/transpiled_output that has transpiled the ES6 js to regular internet ready js. Also notice that all the js application logic lives inside /javascripts/src and that app.jsx uses ES6 module imports to require dependencies.

Files to notice.

./package.json

All the javascript dependencies that we need. Notice that we are requiring things like react, relay and graphql here. Our rails server won't be using anything other than the most vanilla useage of the asset pipeline, ie 'render this javascript file that webpack just built'.

./schema.json

schema.json tells graphql about the shape, location and required params needed to interact in a declarative fashion with the rails application server. Important note, lib/tasks/graphql.rake contains a rake task that programmatically builds schema.json. The below is an excerpt and the actual schema.json over 2k lines and generally not intended for human consumption.

./webpack.config.js

Webpack is a fancy node library that enables all kinds of magic like 'transpiling'. In this case, we will be using webpack and babel to transpile a bunch of .jsx files that are written with ES6 into a more browser friendly form of javascript.

Next Steps

The Fine Print

Particular Disclaimer: This tutorial isn't intended to be 100% every single step you need to take to make things work, this tutorial will help you create a mental model for how graphql and relay keep track of data, above all, the source code has all the details required to make the application work its magic.

Other Particular Disclaimer: I don't intend for this tutorial to be the 'right' or 'perfect' or 'best' way to do something. This tutorial is 'a' way to get a desired result. If you desire a different result or a different way of getting the same result, feel free to do that.

General Disclaimer: Things change, operating environments aren't all the same, people have different ideas about things, people are wrong, people are right, things don't always add up and when in doubt, look at the source code.