May 13, 2019 by Robert
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.
<style>tag generation that contains only the CSS that needs to be rendered.
<head>section, using react-helmet.
subscriptionquery support for real-time data (just set
import()‘ing inside a function.
.global.(css|scss|less)import to preserve class names.
npm run production, that generates optimised server and client code.
.brfiles (your entire app’s
main.js.bz- including all dependencies - goes from 346kb -> 89kb!)
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.)
|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.|
|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.|
|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.|
|Winston||A logger for just about everything.|
|Babel||Transpiles ESX to ESX and performs relay transformations.|
|concurrently||Run multiple commands concurrently.|
|Husky||Git hooks for eslint and prettier.|
|LocalTunnel||Expose yourself to the world.|
|React Hot Loader||Allows tweaking of React components in real time.|
|Webpack||Bundles npm packages, application Java Script, CSS, images, etc. into bundles.|
This is a basic todo app built on react. The app uses Hasura for its backend, leveraging the following features of Hasura:
This project comes with the following custom microservice - a React TODO app made using GraphQL with Apollo Client
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.
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
Do you want to try our mock backend from GraphQL app. It is in beta phase and 100% free.