Use GraphQL Code Generator for codegen and other improvements (#1734)

- [x] Use `useStyles` of isomorphic-style-loader@5.1.0
- [x] Static TS check on test
- [x] Reduce `tools/*` implementations - We can use `execa` instead of implementing `cp.ts` by ourselves
- [x] Use [GraphQL Code Generator](https://github.com/dotansimha/graphql-code-generator) for codegen - It generates typed data binding functions that Apollo command doesn't
- [x] Make route params (`/posts/:id`) usable in AppContext

----

* rm unnecessary comment

* Use useStyles of isomorphic-style-loader

* Update isomorphic-style-loader

* mod: tsc on test

* mod: Add type defs for deployment config

* mod: Use execa instead of manually implementing child_process action

* refac: use fs.ts more

* tsc --noEmit

* feat: Use auto-generated data binding function by GraphQL Code Generator

* rm unnecessary packages

* Cherry-pick: Introduce PostCSS Preset Env (#1733)

Fixes #1731
# Conflicts:
#	package.json
#	yarn.lock

* Update all dependencies

* ncu -u
* fit `@types/*` versions to impls
* fix all related issues
    * fix all typescript issues
    * Fix new options in css-loader and browser-sync

* fix: lint .ts on commit

* Make route params (/posts/:id) usable in AppContext

.travis.yml

@@ -13,6 +13,7 @@ addons:
       - g++-4.8
 cache: yarn
 script:
+  - yarn codegen
   - yarn lint
   - yarn test
   - yarn build --release

package.json

@@ -13,178 +13,166 @@
     "not ie < 9"
   ],
   "dependencies": {
-    "@babel/polyfill": "^7.4.0",
-    "apollo-cache-inmemory": "^1.5.1",
-    "apollo-client": "^2.5.1",
-    "apollo-link": "^1.2.11",
-    "apollo-link-error": "^1.1.10",
-    "apollo-link-http": "^1.5.14",
+    "apollo-cache-inmemory": "^1.6.2",
+    "apollo-client": "^2.6.2",
+    "apollo-link": "^1.2.12",
+    "apollo-link-error": "^1.1.11",
+    "apollo-link-http": "^1.5.15",
     "apollo-link-logger": "^1.2.3",
-    "apollo-link-schema": "^1.2.2",
-    "apollo-server": "^2.4.8",
-    "apollo-server-express": "^2.4.8",
-    "body-parser": "^1.18.3",
+    "apollo-link-schema": "^1.2.3",
+    "apollo-server": "^2.6.3",
+    "apollo-server-express": "^2.6.3",
+    "body-parser": "^1.19.0",
     "classnames": "^2.2.6",
     "cookie-parser": "^1.4.4",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "express-jwt": "^5.3.1",
-    "graphql": "^14.0",
+    "graphql": "^14.3",
     "graphql-tag": "^2.10.1",
     "history": "^4.9.0",
-    "isomorphic-style-loader": "^5.0.1",
+    "isomorphic-style-loader": "^5.1.0",
     "jsonwebtoken": "^8.5.1",
     "lodash.merge": "^4.6.1",
-    "node-fetch": "^2.3.0",
+    "node-fetch": "^2.6.0",
     "normalize.css": "^8.0.1",
     "passport": "^0.4.0",
     "passport-facebook": "^3.0.0",
     "pretty-error": "^2.1.1",
-    "query-string": "^6.4.0",
-    "react": "^16.8.4",
-    "react-apollo": "^2.5.2",
-    "react-dom": "^16.8.4",
-    "sequelize": "^5.1.0",
-    "serialize-javascript": "^1.6.1",
-    "source-map-support": "^0.5.11",
-    "sqlite3": "^4.0.8",
-    "universal-router": "^8.1.0",
+    "query-string": "^6.7.0",
+    "react": "^16.8.6",
+    "react-apollo": "^2.5.6",
+    "react-dom": "^16.8.6",
+    "sequelize": "^5.8.9",
+    "serialize-javascript": "^1.7.0",
+    "source-map-support": "^0.5.12",
+    "sqlite3": "^4.0.9",
+    "universal-router": "^8.2.0",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
-    "@babel/node": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/core": "^7.4.5",
+    "@babel/node": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/plugin-transform-react-inline-elements": "^7.2.0",
-    "@babel/preset-env": "^7.4.1",
+    "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@types/autoprefixer": "^9.4.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "@graphql-codegen/cli": "^1.2.1",
+    "@graphql-codegen/typescript-operations": "^1.2.1",
+    "@graphql-codegen/typescript-react-apollo": "^1.2.1",
     "@types/babel-core": "^6.25.6",
+    "@types/babel__core": "^7.1.2",
     "@types/body-parser": "^1.17.0",
-    "@types/browser-sync": "^0.0.43",
-    "@types/chokidar": "^2.1.3",
-    "@types/classnames": "^2.2.7",
+    "@types/browser-sync": "^3001.0.28-alpha",
+    "@types/classnames": "^2.2.8",
     "@types/cookie-parser": "^1.4.1",
     "@types/cssnano": "^4.0.0",
-    "@types/enzyme": "^3.9.1",
+    "@types/enzyme": "^3.9.3",
     "@types/eslint": "^4.16.6",
     "@types/eslint-plugin-prettier": "^2.2.0",
-    "@types/express": "^4.16.1",
+    "@types/execa": "^0.9.0",
+    "@types/express": "^4.17.0",
     "@types/express-jwt": "^0.0.42",
-    "@types/get-port": "^4.2.0",
     "@types/glob": "^7.1.1",
     "@types/graphql": "^14.2.0",
     "@types/history": "^4.7.2",
-    "@types/jest": "^24.0.11",
+    "@types/jest": "^24.0.14",
     "@types/jsonwebtoken": "^8.3.2",
     "@types/lodash.merge": "^4.6.6",
     "@types/markdown-it": "^0.0.7",
     "@types/mkdirp": "^0.5.2",
-    "@types/node-fetch": "^2.1.7",
-    "@types/passport": "^1.0.0",
-    "@types/passport-facebook": "^2.1.8",
+    "@types/node-fetch": "^2.3.6",
+    "@types/passport": "^0.4.7",
+    "@types/passport-facebook": "^2.1.9",
     "@types/postcss-calc": "^7.0.0",
-    "@types/postcss-nested": "^4.1.0",
-    "@types/prettier": "^1.16.1",
-    "@types/query-string": "^6.3.0",
-    "@types/react": "^16.8.10",
-    "@types/react-dev-utils": "^7.0.1",
-    "@types/react-dom": "^16.8.3",
-    "@types/react-test-renderer": "^16.8.1",
+    "@types/prettier": "^1.16.4",
+    "@types/react": "^16.8.20",
+    "@types/react-dev-utils": "^9.0.1",
+    "@types/react-dom": "^16.8.4",
+    "@types/react-test-renderer": "^16.8.2",
     "@types/rimraf": "^2.0.2",
     "@types/serialize-javascript": "^1.5.0",
     "@types/source-map-support": "^0.5.0",
     "@types/sqlite3": "^3.1.5",
     "@types/stylelint": "^9.10.0",
-    "@types/typescript": "^2.0.0",
-    "@types/universal-router": "^8.0.0",
-    "@types/webpack": "^4.4.27",
+    "@types/webpack": "^4.4.32",
     "@types/webpack-assets-manifest": "^3.0.0",
     "@types/webpack-bundle-analyzer": "^2.13.1",
     "@types/webpack-dev-middleware": "^2.0.2",
     "@types/webpack-hot-middleware": "^2.16.5",
     "@types/webpack-node-externals": "^1.6.3",
-    "@types/whatwg-fetch": "^0.0.33",
-    "@typescript-eslint/eslint-plugin": "^1.6.0",
-    "apollo": "^2.6.2",
-    "autoprefixer": "^9.5.0",
+    "@typescript-eslint/eslint-plugin": "^1.10.2",
+    "@typescript-eslint/parser": "^1.10.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.7.1",
-    "babel-loader": "^8.0.5",
-    "browser-sync": "^2.26.3",
-    "chokidar": "^2.1.2",
-    "css-loader": "^2.1.1",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.6",
+    "browser-sync": "^2.26.7",
+    "chokidar": "^3.0.1",
+    "css-loader": "^3.0.0",
     "cssnano": "^4.1.10",
-    "enzyme": "^3.9.0",
-    "eslint": "^5.15.3",
+    "enzyme": "^3.10.0",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.1.0",
+    "eslint-config-prettier": "^5.0.0",
     "eslint-import-resolver-node": "^0.3.2",
     "eslint-loader": "^2.1.2",
     "eslint-plugin-css-modules": "^2.11.0",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
-    "file-loader": "^3.0.1",
-    "front-matter": "^3.0.1",
-    "get-port": "^4.2.0",
-    "glob": "^7.1.3",
-    "husky": "^1.3.1",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.13.0",
+    "execa": "^1.0.0",
+    "file-loader": "^4.0.0",
+    "front-matter": "^3.0.2",
+    "glob": "^7.1.4",
+    "husky": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.7.1",
-    "jest-codemods": "^0.19.1",
+    "jest": "^24.8.0",
+    "jest-codemods": "^0.20.0",
     "jest-transform-graphql": "^2.1.0",
-    "lint-staged": "^8.1.5",
+    "lint-staged": "^8.2.1",
     "markdown-it": "^8.4.2",
     "mkdirp": "^0.5.1",
-    "null-loader": "^0.1.1",
-    "opn-cli": "^4.0.0",
+    "null-loader": "^3.0.0",
+    "opn-cli": "^5.0.0",
     "pixrem": "^5.0.0",
     "pleeease-filters": "^4.0.0",
-    "postcss": "^7.0.14",
+    "postcss": "^7.0.17",
     "postcss-calc": "^7.0.1",
-    "postcss-color-function": "^4.0.1",
-    "postcss-custom-media": "^7.0.7",
-    "postcss-custom-properties": "^8.0.9",
-    "postcss-custom-selectors": "^5.1.2",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-media-minmax": "^4.0.0",
-    "postcss-nested": "^4.1.2",
-    "postcss-nesting": "^7.0.0",
+    "postcss-preset-env": "^6.6.0",
     "postcss-pseudoelements": "^5.0.0",
-    "postcss-selector-matches": "^4.0.0",
-    "postcss-selector-not": "^4.0.0",
-    "prettier": "^1.16.4",
-    "raw-loader": "^2.0.0",
+    "prettier": "^1.18.2",
+    "raw-loader": "^3.0.0",
     "react-deep-force-update": "^2.1.3",
-    "react-dev-utils": "^8.0.0",
-    "react-error-overlay": "^5.1.4",
-    "react-test-renderer": "^16.8.4",
+    "react-dev-utils": "^9.0.1",
+    "react-error-overlay": "^5.1.6",
+    "react-test-renderer": "^16.8.6",
     "rimraf": "^2.6.3",
-    "stylelint": "^9.10.1",
-    "stylelint-config-standard": "^18.2.0",
-    "stylelint-order": "^2.1.0",
+    "stylelint": "^10.1.0",
+    "stylelint-config-standard": "^18.3.0",
+    "stylelint-order": "^3.0.0",
     "svg-url-loader": "^2.3.2",
-    "typescript": "^3.4.1",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.6",
+    "typescript": "^3.5.2",
+    "url-loader": "^2.0.0",
+    "webpack": "^4.34.0",
     "webpack-assets-manifest": "^3.1.1",
-    "webpack-bundle-analyzer": "^3.1.0",
-    "webpack-dev-middleware": "^3.6.1",
-    "webpack-hot-middleware": "^2.24.3",
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-dev-middleware": "^3.7.0",
+    "webpack-hot-middleware": "^2.25.0",
     "webpack-node-externals": "^1.7.2"
   },
   "lint-staged": {
     "ignore": [
       "package.json"
     ],
     "linters": {
-      "*.{js,jsx}": [
+      "*.{ts,tsx}": [
         "npm run fix-js",
         "git add --force"
       ],
@@ -202,12 +190,12 @@
     "precommit": "lint-staged",
     "lint-js": "eslint --ext .ts --ext .tsx --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
     "lint-css": "stylelint \"src/**/*.{css,less,styl,scss,sass,sss}\"",
-    "lint": "yarn codegen && yarn tsc && yarn run lint-js && yarn run lint-css",
+    "lint": "yarn run lint-js && yarn run lint-css",
     "fix-js": "yarn run lint-js --fix",
     "fix-css": "yarn run lint-css --fix",
     "fix": "yarn run fix-js && yarn run fix-css",
     "codegen": "babel-node --extensions '.ts' tools/run codegen",
-    "test": "jest",
+    "test": "tsc && jest",
     "test-watch": "yarn run test --watch --notify",
     "test-cover": "yarn run test --coverage",
     "coverage": "yarn run test-cover && opn coverage/lcov-report/index.html",

src/client.tsx

@@ -68,6 +68,8 @@ async function onLocationChange(location: Location, action?: any) {
     // and whose action method returns anything other than `undefined`.
     const route = await router.resolve(context);
 
+    context.params = route.params;
+
     // Prevent multiple page renders during the routing process
     if (currentLocation.key !== location.key) {
       return;

src/components/Feedback/Feedback.tsx

@@ -8,24 +8,30 @@
  */
 
 import React from 'react';
-import withStyles from 'isomorphic-style-loader/withStyles';
+import useStyles from 'isomorphic-style-loader/useStyles';
 import s from './Feedback.css';
 
-const Feedback = () => (
-  <div className={s.root}>
-    <div className={s.container}>
-      <a className={s.link} href="https://gitter.im/kriasoft/react-starter-kit">
-        Ask a question
-      </a>
-      <span className={s.spacer}>|</span>
-      <a
-        className={s.link}
-        href="https://github.com/kriasoft/react-starter-kit/issues/new"
-      >
-        Report an issue
-      </a>
+const Feedback = () => {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <a
+          className={s.link}
+          href="https://gitter.im/kriasoft/react-starter-kit"
+        >
+          Ask a question
+        </a>
+        <span className={s.spacer}>|</span>
+        <a
+          className={s.link}
+          href="https://github.com/kriasoft/react-starter-kit/issues/new"
+        >
+          Report an issue
+        </a>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
-export default withStyles(s)(Feedback);
+export default Feedback;