Do you recognize the inefficiencies of having to either make a custom endpoint for every page or make multiple requests for different resources on page load? Do you have a small team with big requirements looking at a greenfield project?
GraphQL, a transport-layer query language by Facebook, is revolutionizing web application development. We can now:
- Build a fully-typed, self-documenting API via database introspection
- Optionally extend that schema with Node (i.e. emails, external APIs, etc)
- Have only one API endpoint service your entire frontend
- Declare data dependencies on a React component
- Resolve all data dependencies on render to fetch all data in a single request
- Let Relay handle your data-binding and caching in the frontend (No Redux!)
For a more technical analysis, consult Phil Sturgeon's GraphQL vs REST Overview. He has written a few posts on the subject at a valuable level of depth, and I do not need to rehash his contributions here :)
The decision to choose GraphQL for me was somewhat forced. I was a 1-man team at the time, and I was faced with the necessity of a full rewrite of my codebase. Several points lined up for this blog post series:
- My client’s priorities (and my ticket queue) illustrated the need to achieve architectural, security, and stability improvements along with a full UI rework. Doing all of these in pieces would take about as long as doing them all at once in a full rewrite. Given the state of the existing Node API, Mongo database, and Angular Frontend, a rewrite seemed as necessary as it was appealing.
- PostgraphQL v4 just came out. Now called Postgraphile (graphile-build + Postgres), I could build a Postgres database complete with database-level security and get a Relay-compatible GraphQL API for free. I had done it once and it was cool, and if I had to rewrite my codebase then I would need a way to get it done quickly. Getting a free API from my database schema was too tempting to pass up.
- Relay Modern had just come out. Now just called Relay, this allowed for the declaration of data dependencies inside of a React component. The network request happened and the results were cached and all this without any Redux sagas, actions, or reducers. Relay Modern was the icing in the cake for me in that it was a critical time saver that I was not willing to go without.
- Part 2: Introduction to Postgraphile
- Setup a simple node app running postgraphile
- Setup a simple postgres schema for widgets
- Discuss maintainable migrations using Sqitch
- Build a simple Postgraphile extension
- Part 3: Introduction to Relay Modern
- Start with create-react-app
- Add Relay Environment
- Component fragments
- Mutations
- Part 4: Redis-backed Authentication
- Row-level security and Role-based Access Control
- JSON Web Tokens
- CSRF Tokens
- Part 5: Server-side rendered route authentication system
- Quick-and-dirty server-side render
- Route organization and permissions
- Root queries and Views