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.
Words to the Wise
The application code runs at toeatapp.startuplandia.io. This tutorial utilizes Rails 4.2, NPM 3.8, Node 4.2.
Utilize the source code...to_eat_app
Application Setup and Tooling
How are WebPack/Babel and Asset Pipeline working together?
Notice the contents of
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.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
app.jsx uses ES6 module imports to require dependencies.
Files to notice.
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.
Read the next post in this series, ToEatApp React-Relay-GraphQL Tutorial - Queries.