GistID: 363067bd30d0afa000bf18bd757f4c00

GraphQL + Frontend App Journey

I want tools that give me as much as possible for a production-ready app. Something as easy as Ruby On Rails':

rails new

And then getting essential functionality for most apps like sending emails, admin dashboards, and data persistence by simply adding gems like activeadmin, sendgrid, and using ActiveRecord, respectively.

Options

Backend: Hasura

I stumbled on Hasura GraphQL pretty quickly. It has easy CRUD out-of-the-box, but the Events and authorization features are what sold me (also, it's ease of use deploying to Heroku). I've seen enough posts like this that confirmed my decision over alternatives like AppSync, Graphcool, or Prisma.

Frontend: React.js

I explored Flutter a bit but decided on React.js quickly because of how much more resources and libraries are available (similar reason why I chose Rails in the past). Also, I believe it will reduce the friction of quickly creating cross-platform mobile apps.

I also explored Next.js which had additional abstractions on top of React like server rendering, css-in-js, and optimized build sizes. I'm not sure if I will end up using Next.js just reduce the things I have to learn, but we'll see in the next section.

Journey: Part 1

This section is the log of me working through the react-admin tutorial. Here are the reasons I finally chose this project for learning:

Has a 30 minute tutorial. This was an indication of good documentation and 30 minutes seemed like an honest and meaty tutorial instead of a superficial app-in-10-minutes one.
Has a lot of the ammeneties I'm used when working with Rails
Shows how to abstract data sources through "data providers"
Hasura data provider already exists
Allows me to learn a Redux
Allows me to learn a Material Design material-ui framework

Prerequesites

Before I found react-admin, I started going down the create-strv-app path which is app creation wizard built on top of Facebook's create-react-app. I decided to install react-admin into the app I already create with:

yarn create strv-app

but I will quickly start over if this causes a lot of gotchas.

I also had already deployed a sandbox Hasura app to Heroku for the backend. If this remote instance becomes difficult to work with for local dev, I might have to fallback to setting up a local instance.

Step 1 - Get GraphQL data provider working

I worked with "Setting Up" and started on "Making Contact With The API Using a Data Provider". Instead of using the ra-data-json-server that the latter suggests, I decided to work through Hasura's official data provider.

The Hasura readme example already had me working with the Resource component, which the tutorial covers in a later section.

Step 2 - Getting unstuck

Two things I've already run into that are annoying:

Hot Module Replacement (HMR) doesn't seem to be working out of the box so I have to rebuild after every change
TODO: I can't remember what this one was since I didn't get written down fast enough

Conclusions and part 2

In part 2 of this journey, I am going to walk through Hasura's React Native tutorial.

gabrieljoelc/journal.2019-07-13.frontend-journey.md