TheLazy.Dev
Portfolio GitHub

Blog

react |graphql |tutorial |webdev

Getting started with React & GraphQL part I

iamrobert

Robert Matyszewski

Posted on May 16, 2019

Getting started with React & GraphQL part I

The stage of Javascript 2018 Survey was completed by 20k users and contains an analysis of what aspects people like & dislike about web technologies. I found React & GraphQL interesting since they're completing each other and stand out from surveys conclusions:

React is the most popular among front end frameworks.

GraphQL is the top most wanted technology to learn.

Following that, I've combined popular boilerplates and starter apps to start using React with GraphQL. There's so much stuff on the internet that I've decided to split article two articles.

Agenda:

  1. Universal React+GraphQL starter kit
  2. SaaS Boilerplate
  3. React apollo todo app
  4. Universal React Apollo app
  5. Relay Skeleton

1. Universal React+GraphQL starter kit

GitHub logo leebenson / reactql

Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR

ReactQL v4.3.0

license Twitter Follow Deploy to Netlify

Universal front-end React + GraphQL starter kit, written in Typescript.

https://reactql.org

Features

Front-end stack

Server-side rendering

  • Built-in Koa 2 web server, with async/await routing.
  • Full route-aware server-side rendering (SSR) of initial HTML.
  • Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
  • Per-request GraphQL store. Store state is dehydrated via SSR, and…
View on GitHub

Front-end stack

Server stack

  • Built-in Koa 2 web server, with async/await routing.
  • Full route-aware server-side rendering (SSR) of initial HTML.
  • Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
  • Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.
  • MobX for app-wide flux/store state, for automatically re-rendering any React component that 'listens' to state. Fully typed state!
  • Full page React via built-in SSR component - every byte of your HTML is React.
  • SSR in both development and production, even with hot-code reload.

Real-time

  • Hot code reloading; zero refresh, real-time updates in development.
  • Development web server that automatically sends patches on code changes, and restarts the built-in Web server for SSR renders that reflect what you'd see in production.
  • WebSocket subscription query support for real-time data (just set WS_SUBSCRIPTIONS=1 in .env)

Code optimisation

  • Webpack v4, with tree shaking -- dead code paths are automatically eliminated.
  • Asynchronous code loading when import()'ing inside a function.
  • Automatic per-vendor chunk splitting/hashing, for aggressive caching (especially good behind a HTTP/2 proxy!)
  • Gzip/Brotli minification of static assets.
  • CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together!

Styles

  • Emotion, for writing CSS styles inline and generating the minimal CSS required to properly render your components.
  • PostCSS v7 with next-gen CSS and automatic vendor prefixing when importing .css, .scss or .less files.
  • SASS and LESS support (also parsed through PostCSS.)
  • Automatic vendor prefixing - write modern CSS, and let the compiler take care of browser compatibility.
  • Mix and match SASS, LESS and regular CSS - without conflicts!
  • CSS modules - your classes are hashed automatically, to avoid namespace conflicts.
  • Compatible with Foundation, Bootstrap, Material UI and more. Simply configure via a .global.(css|scss|less) import to preserve class names.

Production-ready

  • Production bundling via npm run production, that generates optimised server and client code.
  • Static compression using the Gzip and Brotli algorithms for the serving of static assets as pre-compressed .gz and .br files (your entire app's main.js.bz - including all dependencies - goes from 346kb -> 89kb!)
  • Static bundling via npm run build:static. Don't need server-side rendering? No problem. Easily deploy a client-only SPA to any static web host (Netlify, etc.)

2. SaaS Boilerplate

GitHub logo MachineAcuity / rebar

Multi-tenant SaaS boilerplate + examples for universal web application with React, Material-UI, Relay, GraphQL, JWT, Node.js, C* DB - Cassandra/Elassandra/Scylla.

Rebar

Multi-tenant SaaS boilerplate + examples for universal web application with React, Material-UI, Relay, GraphQL, JWT, Node.js, C* DB - Cassandra/Elassandra/Scylla.

Technology stack

Client

Technology Description
found Extensible route-based routing for React applications.
found-relay Relay integration for Found.
GraphQL A query language for describing the capabilities and requirements of data models for client‐server applications.
JSS JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way.
Material UI Library for implementing Material Design in React. All user interface in this kit is built predominantly using Material UI components.
mdi-material-ui This module provides Material-UI components for all Material Design Icons.
React The best library for building modern browser-based and mobile UIs.
React Helmet Reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.
Relay A
…
View on GitHub

Front-end stack

Technology Description
found Extensible route-based routing for React applications.
GraphQL A query language for describing the capabilities and requirements of data models for client‐server applications.
JSS JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way.
Material UI Library for implementing Material Design in React. All user interface in this kit is built predominantly using Material UI components.
React The best library for building modern browser-based and mobile UIs.
React Helmet Reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.
Relay A Javascript framework for building data-driven react applications.

Server stack

Technology Description
Apache Cassandra The right choice when you need scalability and high availability without compromising performance. Linear scalability and proven fault-tolerance on commodity hardware or cloud infrastructure make it the perfect platform for mission-critical data. Cassandra's support for replicating across multiple datacenters is best-in-class, providing lower latency for your users and the peace of mind of knowing that you can survive regional outages.
Data Loader Generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.
Elassandra Elassandra Combines Cassandra And Elasticsearch In A Single Powerful Integrated Solution. URB works well with Elassandra.
Express Fast, unopinionated, minimalist web framework for Node.js
express-cassandra Cassandra ORM/ODM/OGM for Node.js with optional support for Elassandra & JanusGraph
Express GraphQL A Node.js express library that allows the creation of GraphQL servers.
JWT JSON Web Tokens is an industry standard RFC 7519 method for representing claims securely between two parties.
Node.js Event-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient.
Winston A logger for just about everything.

Development tools

Technology Description
Babel Transpiles ESX to ESX and performs relay transformations.
concurrently Run multiple commands concurrently.
ESLint A fully pluggable tool for identifying and reporting on patterns in JavaScript.
Flow Static type checker, designed to find type errors in JavaScript programs.
Husky Git hooks for eslint and prettier.
LocalTunnel Expose yourself to the world.
Prettier Code formatter for javaScript.
React Hot Loader Allows tweaking of React components in real time.
Webpack Bundles npm packages, application Java Script, CSS, images, etc. into bundles.

3. React apollo todo app

GitHub logo k8s-platform-hub / react-apollo-todo-app

A simple todo app build on react using the graphql queries of hasura

react-apollo-todo-app

This is a basic todo app built on react. The app uses Hasura for its backend, leveraging the following features of Hasura:

  • Deploy the react app
  • Hasura Authentication the Auth UI Kit
  • Hasura Database
  • GraphQL queries provided by Hasura

Pre-requisites

  • Ensure that you have the HasuraCLI installed on your local machine.
  • Login into Hasura by running the following command on your command shell
hasura login

Quickstart

Getting the project

To get the project, run the following in your command shell:

hasura quickstart hasura/react-apollo-todo-app

Deploying the project

Deploying the project is equivalent to pushing to a remote git repo

cd react-apollo-todo-app
git add . && git commit -m "Initial commit"
git push hasura master

Opening the react app in your browser

After you are done deploying the project, you can open up the react app in your browser by:

hasura microservice open ui

React App Code

You can…

View on GitHub

This is a basic todo app built on react. The app uses Hasura for its backend, leveraging the following features of Hasura:

  • Deploy the react app
  • Hasura Authentication the Auth UI Kit
  • Hasura Database
  • GraphQL queries provided by Hasura

This project comes with the following custom microservice - a React TODO app made using GraphQL with Apollo Client

4. Universal React Apollo app

GitHub logo WeLikeGraphQL / universal-react-apollo-example

Universal React Apollo App (GraphQL) consuming: https://github.com/WeLikeGraphQL/wordpress-graphql-api-example!

Universal React Apollo Example

Gitter Build Status

An example of the app that shows how to use a modern stack (strong accent on GraphQL!).

Features

  • GraphQL for fetching data! The most awesome part of the project!
  • Universal Rendering (Server Side Rendering)
  • ES6/ES2015 with Babel
  • React data container for the Apollo Client
  • Integrating predictable state container Redux with Apollo
  • Hot reloading using React-Hot-Loader
  • Recompose as a React utility belt for higher order components
  • Development and production bundling by Webpack
  • CSSNext: use of official W3C syntax of the future CSS
  • Transforming styles with JS plugins by PostCSS
  • Wow.js for CSS animations
  • Flexbox for resolving layout fatigue and making the app responsive (open the app in desktop, mobile, whatever...). Doesn't work on IE 9, but it should not be a problem nowadays. See browsers usage.
  • CSS Modules: say goodbye to global scope in CSS and most of conflicts
  • Jest Snapshot Testng, some…
View on GitHub

Features

  • GraphQL for fetching data! The most awesome part of the project!
  • Universal Rendering (Server Side Rendering)
  • ES6/ES2015 with Babel
  • React data container for the Apollo Client
  • Integrating predictable state container Redux with Apollo
  • Hot reloading using React-Hot-Loader
  • Recompose as a React utility belt for higher order components
  • Development and production bundling by Webpack
  • CSSNext: use of official W3C syntax of the future CSS
  • Transforming styles with JS plugins by PostCSS
  • Wow.js for CSS animations
  • Flexbox for resolving layout fatigue and making the app responsive (open the app in desktop, mobile, whatever...). Doesn't work on IE 9, but it should not be a problem nowadays. See browsers usage.
  • CSS Modules: say goodbye to global scope in CSS and most of conflicts
  • Jest Snapshot Testng, some parts in Enzyme and Sinon
  • Linting both JS and CSS, respectively by: ESLint and Stylelint

5. Relay Skeleton

GitHub logo fortruce / relay-skeleton

React, Relay, GraphQL project skeleton

React Fullstack Skeleton

This skeleton project is meant to scaffold a fullstack React, Relay, and GraphQL project The skeleton uses webpack and gulp to manage the build and provide a great development experience. The frontend stack is React, and Relay All React changes are automatically hot reloaded using react-hot-loader. Also, the backend server is automatically restarted upon any changes using nodemon.

Both the server and frontend code are built and transpiled using webpack, while gulp is used primarily to start the webpack-dev-server and nodemon.

Getting started

npm start  # Launch the GraphQL server and the Webpack dev server
open http://localhost:3000

Directory Structure

build/                  // webpack build output
  public/               //  publicly served assets
    index.html
    bundle.js           // frontend bundle  built w/ webpack
  server.js             // backend server   built w/ webpack
src/
  frontend/
    components/         // React components
    containers/         // Relay Containers
    routes/             // Relay Routes
    index.js            // React.render Root component
    index.template.html //
…
View on GitHub

This skeleton project is meant to scaffold a fullstack React, Relay, and GraphQL project. The skeleton uses webpack and gulp to manage the build and provide a great development experience. The frontend stack is React, and Relay. All React changes are automatically hot reloaded using react-hot-loader. Also, the backend server is automatically
restarted upon any changes using nodemon.

Both the server and frontend code are built and transpiled using webpack, while gulp is used primarily to start the webpack-dev-server and nodemon.

Typical Usage

This skeleton was designed with a typical use case of having a backend api serve a React SPA. The skeleton automatically proxies all requests to /graphql thru the webpack-dev-server to the backend GraphQL server.

The frontend is automatically hot reloaded whenever you save a file. See
[react-hot-loader] for more details on how this works. It enables you to immediately see changes in React components without losing application state or having to reload your page!

The backend server is automatically restarted whenever you save a file.
If, for example, you modify the GraphQL schema, then the GraphQL server will be restarted to reflect the changes, the schema.json will be regenerated using an introspection query, and the frontend code will be recompiled to re-run Relay.QL queries through the babel-relay-plugin.

💖 💪 🙅 🚩
iamrobert
Robert Matyszewski

Posted on May 16, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Getting started with React & GraphQL part I
react Getting started with React & GraphQL part I

May 16, 2019

Getting started with React & GraphQL part II
react Getting started with React & GraphQL part II

May 21, 2019