(Day 86 of 100) Quick Setup Guide for Front-End Environment

3 min readApr 21, 2019

The below illustrates 5 different React-Apollo environments/boiler plates setup.

First two compare how React and Hooks differentiate and are without Apollo implementations. I find the Hooks is little more concise and easier to understand than plain React. It’s noteworthy that `this` keyword is eliminated from the Hooks environment.

The last three environments implement Apollo with different flavors. First of the three implements Apollo-Boost, the second, Apollo-Client and the third adds community developed React-Apollo-Hooks on top of Apollo-Client.

1. Hooks-Router-Redux

Create react-app and install dependencies

Create react-app: $npx create-react-app [app name here]
Install dependencies: $npm install redux react-router-dom redux-react-hook// @package.json you should see below
"dependencies": {
   "react": "^16.8.6",
   "react-dom": "^16.8.6",
   "react-router-dom": "^5.0.0",
   "react-scripts": "2.1.8",
   "redux": "^4.0.1",
   "redux-react-hook": "^3.3.1"
},

copy paste below codes:

2. React-Router-Redux

Create react-app and install dependencies

Create react-app: $npx create-react-app [app name here]
Install dependencies: $npm install redux react-router-dom react-redux// @package.json you should see below
"dependencies": {
   "react": "^16.8.4",
   "react-dom": "^16.8.4",
   "react-redux": "^6.0.1",
   "react-router-dom": "^5.0.0",
   "react-scripts": "2.1.8",
   "redux": "^4.0.1"
}

Copy paste below codes

3. Hooks-Router-Redux-ApolloBoost w/ Github Repository GraphQL API.

Create react-app and install dependencies

Create react-app: $npx create-react-app [app name here]
Install dependencies: $npm install redux react-router-dom redux-react-hook apollo-boost react-apollo graphql graphql-tag// @package.json you should see below
"dependencies": {
   "apollo-boost": "^0.3.1",
   "graphql": "^14.2.1",
   "graphql-tag": "^2.10.1",
   "react": "^16.8.6","react-apollo": "^2.5.4",
   "react-dom": "^16.8.6",
   "react-router-dom": "^5.0.0",
   "react-scripts": "2.1.8",
   "redux": "^4.0.1",
   "redux-react-hook": "^3.3.1"
},

On your github account, go to settings > Developer settings > Personal access tokens and generate token to access GitHub GraphQL API. (NOTE: you need to have at least one starred repository in order to see any result)

Above token will no longer work because I regenerated it

Copy paste below code

4. Hooks-Router-Redux-Apollo w/ Github Repository GraphQL API

start from environment #3 (above). uninstall and install dependencies

Uninstall dependencies: $npm uninstall apollo-boostInstall dependencies: $npm install apollo-cache-inmemory apollo-client apollo-link apollo-link-http apollo-link-error apollo-link-context// @package.json you should see below
"dependencies": {
   "apollo-cache-inmemory": "^1.5.1",
   "apollo-client": "^2.5.1",
   "apollo-link": "^1.2.11",
   "apollo-link-context": "^1.0.17",
   "apollo-link-error": "^1.1.10",
   "apollo-link-http": "^1.5.14",
   "graphql": "^14.2.1",
   "graphql-tag": "^2.10.1",
   "react": "^16.8.6",
   "react-apollo": "^2.5.4",
   "react-dom": "^16.8.6",
   "react-router-dom": "^5.0.0",
   "react-scripts": "2.1.8",
   "redux": "^4.0.1",
   "redux-react-hook": "^3.3.1"
},

change code as shown below

5. Hooks-Router-Redux-ReactApolloHooks- w/ Github Respository GraphQL API

start from environment #4 (above). Install dependancies.

Install dependencies: $npm install react-apollo-hooks// @package.json you should see below
"dependencies": {
   "apollo-cache-inmemory": "^1.5.1",
   "apollo-client": "^2.5.1",
   "apollo-link": "^1.2.11",
   "apollo-link-context": "^1.0.17",
   "apollo-link-error": "^1.1.10",
   "apollo-link-http": "^1.5.14",
   "graphql": "^14.2.1",
   "graphql-tag": "^2.10.1",
   "react": "^16.8.6",
   "react-apollo": "^2.5.4",
   "react-apollo-hooks": "^0.4.5",
   "react-dom": "^16.8.6",
   "react-router-dom": "^5.0.0",
   "react-scripts": "2.1.8",
   "redux": "^4.0.1",
   "redux-react-hook": "^3.3.1"
},