Improve feature/apollo-pure (#1720)

* small README.md grammar change (#1675) * Upgrade all dependencies including Babel 7 (#1673) * Upgrade all dependencies including Babel 7 1. ncu --upgradeAll 4. Leave "graphql" to be "^13.2.0" that apollo packages depend on 2. Apply patch of "npx babel-upgrade" output 3. Leave only necessary babel plugins 4. Pass "yarn fix" by disabling stricter rules fixes #1654 #1626 #1607 * Also ignore babel config file from webpack.config.js * Resolve conflict and follow upstream/master * small README.md grammar change (#1675) * Upgrade all dependencies including Babel 7 (#1673) * Upgrade all dependencies including Babel 7 * update apollo packages * Use new local state management of Apollo Client 2.5 * Client Schema * Simplify cache and cache defaults * User in local state instead of context * bye apollo-link-state * mod: better suppressing flow error for .graphql import * fix: jest error by updating jest * Upgrade all dependencies fix 2 breaking changes: * css-loader no longer accepts 'minimize' option * isomorphic-style-loader uses new React Context now * refac: Use functional component for components * fix: resolve apollo and graphql versions problem ref. apollographql/apollo-tooling#630 (comment)
snowMan128 · Mar 21, 2019 · de1a103 · de1a103
1 parent 01f920e
commit de1a103
Show file tree

Hide file tree

Showing 34 changed files with 4,681 additions and 3,624 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -8,3 +8,10 @@
 
 [options]
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectError
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.css
+module.file_ext=.scss
+module.file_ext=.graphql
+module.name_mapper='^.*\.graphql$' -> 'empty/object'
diff --git a/README.md b/README.md
@@ -23,27 +23,27 @@ and newcomers to the industry.
 
 ### Getting Started
 
-* Follow the [getting started guide](./docs/getting-started.md) to download and run the project
+- Follow the [getting started guide](./docs/getting-started.md) to download and run the project
   ([Node.js](https://nodejs.org/) >= 6.5)
-* Check the [code recipes](./docs/recipes) used in this boilerplate, or share yours
+- Check the [code recipes](./docs/recipes) used in this boilerplate, or share yours
 
 ### Customization
 
 The `master` branch of React Starter Kit doesn't include a Flux implementation or any other
 advanced integrations. Nevertheless, we have some integrations available to you in _feature_
 branches that you can use either as a reference or merge into your project:
 
-  * [feature/redux](https://github.com/kriasoft/react-starter-kit/tree/feature/redux) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1084))
-    — isomorphic Redux by [Pavel Lang](https://github.com/langpavel)
-    (see [how to integrate Redux](./docs/recipes/how-to-integrate-redux.md)) (based on `master`)
-  * [feature/apollo](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1147))
-    — isomorphic Apollo Client by [Pavel Lang](https://github.com/langpavel)
-    (see [Tracking PR #1147](https://github.com/kriasoft/react-starter-kit/pull/1147)) (based on `feature/redux`)
-  * [feature/react-intl](https://github.com/kriasoft/react-starter-kit/tree/feature/react-intl) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1135))
-    — isomorphic Redux and React Intl by [Pavel Lang](https://github.com/langpavel)
-    (see [how to integrate React Intl](./docs/recipes/how-to-integrate-react-intl.md)) (based on `feature/apollo`)
-  * [feature/apollo-pure](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo-pure) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1664))
-    — bare Apollo codebase by [piglovesyou](https://github.com/piglovesyou) (based on `master`)
+- [feature/redux](https://github.com/kriasoft/react-starter-kit/tree/feature/redux) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1084))
+  — isomorphic Redux by [Pavel Lang](https://github.com/langpavel)
+  (see [how to integrate Redux](./docs/recipes/how-to-integrate-redux.md)) (based on `master`)
+- [feature/apollo](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1147))
+  — isomorphic Apollo Client by [Pavel Lang](https://github.com/langpavel)
+  (see [Tracking PR #1147](https://github.com/kriasoft/react-starter-kit/pull/1147)) (based on `feature/redux`)
+- [feature/react-intl](https://github.com/kriasoft/react-starter-kit/tree/feature/react-intl) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1135))
+  — isomorphic Redux and React Intl by [Pavel Lang](https://github.com/langpavel)
+  (see [how to integrate React Intl](./docs/recipes/how-to-integrate-react-intl.md)) (based on `feature/apollo`)
+- [feature/apollo-pure](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo-pure) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1664))
+  — bare Apollo codebase by [piglovesyou](https://github.com/piglovesyou) (based on `master`)
 
 You can see status of most reasonable merge combination as [PRs labeled as `TRACKING`](https://github.com/kriasoft/react-starter-kit/labels/TRACKING)
 
@@ -178,36 +178,36 @@ expenses via [OpenCollective](https://opencollective.com/react-starter-kit) or
 
 Anyone and everyone is welcome to [contribute](CONTRIBUTING.md) to this project. The best way to
 start is by checking our [open issues](https://github.com/kriasoft/react-starter-kit/issues),
-[submit a new issues](https://github.com/kriasoft/react-starter-kit/issues/new?labels=bug) or
+[submit a new issue](https://github.com/kriasoft/react-starter-kit/issues/new?labels=bug) or
 [feature request](https://github.com/kriasoft/react-starter-kit/issues/new?labels=enhancement),
 participate in discussions, upvote or downvote the issues you like or dislike, send [pull
 requests](CONTRIBUTING.md#pull-requests).
 
 ### Learn More
 
-* [Getting Started with React.js](http://facebook.github.io/react/)
-* [Getting Started with GraphQL and Relay](https://quip.com/oLxzA1gTsJsE)
-* [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
-* [React.js Discussion Board](https://discuss.reactjs.org/)
-* [Flux Architecture for Building User Interfaces](http://facebook.github.io/flux/)
-* [Enzyme — JavaScript Testing utilities for React](http://airbnb.io/enzyme/)
-* [Flow — A static type checker for JavaScript](http://flowtype.org/)
-* [The Future of React](https://github.com/reactjs/react-future)
-* [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme)
+- [Getting Started with React.js](http://facebook.github.io/react/)
+- [Getting Started with GraphQL and Relay](https://quip.com/oLxzA1gTsJsE)
+- [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
+- [React.js Discussion Board](https://discuss.reactjs.org/)
+- [Flux Architecture for Building User Interfaces](http://facebook.github.io/flux/)
+- [Enzyme — JavaScript Testing utilities for React](http://airbnb.io/enzyme/)
+- [Flow — A static type checker for JavaScript](http://flowtype.org/)
+- [The Future of React](https://github.com/reactjs/react-future)
+- [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme)
 
 ### Related Projects
 
-* [GraphQL Starter Kit](https://github.com/kriasoft/graphql-starter-kit) — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
-* [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
-* [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — Boilerplate for authoring JavaScript/React.js libraries
+- [GraphQL Starter Kit](https://github.com/kriasoft/graphql-starter-kit) — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
+- [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
+- [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — Boilerplate for authoring JavaScript/React.js libraries
 
 ### Support
 
-* [#react-starter-kit](http://stackoverflow.com/questions/tagged/react-starter-kit) on Stack Overflow — Questions and answers
-* [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter — Watch announcements, share ideas and feedback
-* [GitHub issues](https://github.com/kriasoft/react-starter-kit/issues), or [Scrum board](https://waffle.io/kriasoft/react-starter-kit) — File issues, send feature requests
-* [appear.in/react](https://appear.in/react) — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
-* [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya), or [Skype](http://hatscripts.com/addskype?koistya) — Private consulting
+- [#react-starter-kit](http://stackoverflow.com/questions/tagged/react-starter-kit) on Stack Overflow — Questions and answers
+- [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter — Watch announcements, share ideas and feedback
+- [GitHub issues](https://github.com/kriasoft/react-starter-kit/issues), or [Scrum board](https://waffle.io/kriasoft/react-starter-kit) — File issues, send feature requests
+- [appear.in/react](https://appear.in/react) — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
+- [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya), or [Skype](http://hatscripts.com/addskype?koistya) — Private consulting
 
 ### License
 

diff --git a/flow-typed/npm/isomorphic-style-loader_vx.x.x.js b/flow-typed/npm/isomorphic-style-loader_vx.x.x.js
@@ -30,7 +30,7 @@ declare module 'isomorphic-style-loader/lib/insertCss' {
   declare module.exports: any;
 }
 
-declare module 'isomorphic-style-loader/lib/withStyles' {
+declare module 'isomorphic-style-loader/withStyles' {
   // TODO: Using ComponentType<T> does not work so simply return T.
   // import type {ComponentType} from 'react';
   declare module.exports: (
@@ -42,13 +42,17 @@ declare module 'isomorphic-style-loader/lib/withStyles' {
     ) => (<T>(component: T) => T);
 }
 
+declare module 'isomorphic-style-loader/StyleContext' {
+  declare module.exports: any;
+}
+
 // Filename aliases
 declare module 'isomorphic-style-loader/lib/index.js' {
   declare module.exports: $Exports<'isomorphic-style-loader/lib/index'>;
 }
 declare module 'isomorphic-style-loader/lib/insertCss.js' {
   declare module.exports: $Exports<'isomorphic-style-loader/lib/insertCss'>;
 }
-declare module 'isomorphic-style-loader/lib/withStyles.js' {
-  declare module.exports: $Exports<'isomorphic-style-loader/lib/withStyles'>;
+declare module 'isomorphic-style-loader/withStyles.js' {
+  declare module.exports: $Exports<'isomorphic-style-loader/withStyles'>;
 }
diff --git a/package.json b/package.json
@@ -13,126 +13,125 @@
     "not ie < 9"
   ],
   "dependencies": {
-    "@babel/polyfill": "^7.0.0",
-    "apollo-cache-inmemory": "^1.2.10",
-    "apollo-client": "^2.4.2",
-    "apollo-link": "^1.2.3",
-    "apollo-link-error": "^1.1.1",
-    "apollo-link-http": "^1.5.5",
+    "@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-link-logger": "^1.2.3",
-    "apollo-link-schema": "^1.1.1",
-    "apollo-link-state": "^0.4.2",
-    "apollo-server": "^2.1.0",
-    "apollo-server-express": "^2.1.0",
+    "apollo-link-schema": "^1.2.2",
+    "apollo-server": "^2.4.8",
+    "apollo-server-express": "^2.4.8",
     "body-parser": "^1.18.3",
     "classnames": "^2.2.6",
-    "cookie-parser": "^1.4.3",
-    "express": "^4.16.3",
+    "cookie-parser": "^1.4.4",
+    "express": "^4.16.4",
     "express-jwt": "^5.3.1",
-    "graphql": "^14.0.2",
-    "graphql-tag": "^2.9.2",
-    "history": "^4.7.2",
-    "isomorphic-style-loader": "^4.0.0",
-    "jsonwebtoken": "^8.3.0",
+    "graphql": "^14.0",
+    "graphql-tag": "^2.10.1",
+    "history": "^4.9.0",
+    "isomorphic-style-loader": "^5.0.1",
+    "jsonwebtoken": "^8.5.1",
     "lodash.merge": "^4.6.1",
-    "node-fetch": "^2.2.0",
-    "normalize.css": "^8.0.0",
+    "node-fetch": "^2.3.0",
+    "normalize.css": "^8.0.1",
     "passport": "^0.4.0",
-    "passport-facebook": "^2.1.1",
+    "passport-facebook": "^3.0.0",
     "pretty-error": "^2.1.1",
-    "prop-types": "^15.6.2",
-    "query-string": "^6.1.0",
-    "react": "^16.5.2",
-    "react-apollo": "^2.1.11",
-    "react-dom": "^16.5.2",
-    "sequelize": "^4.38.1",
-    "serialize-javascript": "^1.5.0",
-    "source-map-support": "^0.5.9",
-    "sqlite3": "^4.0.2",
-    "universal-router": "^6.0.0",
+    "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.6",
+    "universal-router": "^8.1.0",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/node": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/core": "^7.4.0",
+    "@babel/node": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@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-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "apollo": "^2.4.4",
-    "autoprefixer": "^9.1.5",
+    "apollo": "^2.6.2",
+    "autoprefixer": "^9.5.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
-    "browser-sync": "^2.24.7",
-    "chokidar": "^2.0.4",
-    "css-loader": "^1.0.0",
-    "enzyme": "^3.6.0",
-    "eslint": "^5.6.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.5.0",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "browser-sync": "^2.26.3",
+    "chokidar": "^2.1.2",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
+    "enzyme": "^3.9.0",
+    "eslint": "^5.15.3",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.0.1",
+    "eslint-config-prettier": "^4.1.0",
     "eslint-import-resolver-node": "^0.3.2",
-    "eslint-loader": "^2.1.1",
-    "eslint-plugin-css-modules": "^2.9.1",
-    "eslint-plugin-flowtype": "^2.50.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^2.6.2",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^2.0.0",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-css-modules": "^2.11.0",
+    "eslint-plugin-flowtype": "^3.4.2",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
+    "file-loader": "^3.0.1",
     "flow-bin": "^0.88.0",
     "flow-typed": "^2.5.1",
-    "front-matter": "^2.3.0",
+    "front-matter": "^3.0.1",
     "glob": "^7.1.3",
-    "husky": "^1.0.0-rc.15",
+    "husky": "^1.3.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
-    "jest-codemods": "^0.16.0",
+    "jest": "^24.5.0",
+    "jest-codemods": "^0.19.1",
     "jest-transform-graphql": "^2.1.0",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^8.1.5",
     "markdown-it": "^8.4.2",
     "mkdirp": "^0.5.1",
     "null-loader": "^0.1.1",
-    "opn-cli": "^3.1.0",
-    "pixrem": "^4.0.1",
+    "opn-cli": "^4.0.0",
+    "pixrem": "^5.0.0",
     "pleeease-filters": "^4.0.0",
-    "postcss": "^7.0.2",
-    "postcss-calc": "^6.0.1",
+    "postcss": "^7.0.14",
+    "postcss-calc": "^7.0.1",
     "postcss-color-function": "^4.0.1",
-    "postcss-custom-media": "^7.0.3",
-    "postcss-custom-properties": "^8.0.5",
+    "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.0",
+    "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-media-minmax": "^4.0.0",
-    "postcss-nested": "^4.1.0",
+    "postcss-nested": "^4.1.2",
     "postcss-nesting": "^7.0.0",
     "postcss-pseudoelements": "^5.0.0",
     "postcss-selector-matches": "^4.0.0",
     "postcss-selector-not": "^4.0.0",
-    "prettier": "^1.14.3",
-    "raw-loader": "^0.5.1",
+    "prettier": "^1.16.4",
+    "raw-loader": "^2.0.0",
     "react-deep-force-update": "^2.1.3",
-    "react-dev-utils": "^5.0.2",
-    "react-error-overlay": "^4.0.1",
-    "react-test-renderer": "^16.5.2",
-    "rimraf": "^2.6.2",
-    "stylelint": "^9.5.0",
+    "react-dev-utils": "^8.0.0",
+    "react-error-overlay": "^5.1.4",
+    "react-test-renderer": "^16.8.4",
+    "rimraf": "^2.6.3",
+    "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
-    "stylelint-order": "^1.0.0",
+    "stylelint-order": "^2.1.0",
     "svg-url-loader": "^2.3.2",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.19.1",
-    "webpack-assets-manifest": "^3.0.2",
-    "webpack-bundle-analyzer": "^3.0.2",
-    "webpack-dev-middleware": "^3.3.0",
-    "webpack-hot-middleware": "^2.24.2",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.6",
+    "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-node-externals": "^1.7.2"
   },
   "lint-staged": {

diff --git a/src/client.js b/src/client.js
@@ -22,21 +22,19 @@ import router from './router';
 
 const apolloClient = createApolloClient();
 
+// Enables critical path CSS rendering
+// https://github.com/kriasoft/isomorphic-style-loader
+const insertCss = (...styles) => {
+  // eslint-disable-next-line no-underscore-dangle
+  const removeCss = styles.map(x => x._insertCss());
+  return () => {
+    removeCss.forEach(f => f());
+  };
+};
+
 // Global (context) variables that can be easily accessed from any React component
 // https://facebook.github.io/react/docs/context.html
-const context = {
-  // Enables critical path CSS rendering
-  // https://github.com/kriasoft/isomorphic-style-loader
-  insertCss: (...styles) => {
-    // eslint-disable-next-line no-underscore-dangle
-    const removeCss = styles.map(x => x._insertCss());
-    return () => {
-      removeCss.forEach(f => f());
-    };
-  },
-  // For react-apollo
-  client: apolloClient,
-};
+const context = {};
 
 const container = document.getElementById('app');
 let currentLocation = history.location;
@@ -79,7 +77,9 @@ async function onLocationChange(location, action) {
 
     const renderReactApp = isInitialRender ? ReactDOM.hydrate : ReactDOM.render;
     appInstance = renderReactApp(
-      <App context={context}>{route.component}</App>,
+      <App context={context} client={apolloClient} insertCss={insertCss}>
+        {route.component}
+      </App>,
       container,
       () => {
         if (isInitialRender) {