Add features to feature/apollo-pure (#1714)

* Upgrade all dependencies

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

* Pass "req" through GraphQL resolver context

* Through rootValue it cannot be passed from browser GraphQL access
* rm unnecessary code

* Add "Timestamp" scalar type for convinience

* rm unnecessary files

* fix: Timestamp didn't work

* npm graphql requires to be update
vercel/next.js#5238 (comment)

* Feature: Codegen from GraphQL schema and use more Flow types (#2)

* install apllo

* add apollo.config.js

* apollo codegen succeeded

* fix: updateNetworkStatus signature

* rm @flow from files not ready

* add flow-typed files

* done: Using auto-generated types works

* flow-bin@0.89+ has regression. Use ^0.88.0.

* fix: invalid GraphQL primitive types

* Add codegen script

* done: import auto-generated file

* refac: move impl for apollo-link-state to graphql dir as same as server side resolvers

* codegen and ignore eslint these files

* refactor: "networkStatus"

* feat: codegen:standalone

* refac: "OnMemoryState" is what I meant

* Improve codegen (#3)

* delete existing auto-generated types

* change script name

* ignore __generated__ folder

* wip: disallow absolute path resolving under `src` dir

* It causes disregard .js type checking under src

* fix all flow error

* modify: prevent `withStyles` drops component type

* Modify targe Node versions

* Fix build failure: Codegen before lint

* Add Node v10 LTS for build target

.eslintrc.js

@@ -96,15 +96,11 @@ module.exports = {
     // ESLint plugin for prettier formatting
     // https://github.com/prettier/eslint-plugin-prettier
     'prettier/prettier': 'error',
-  },
 
-  settings: {
-    // Allow absolute paths in imports, e.g. import Button from 'components/Button'
-    // https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers
-    'import/resolver': {
-      node: {
-        moduleDirectory: ['node_modules', 'src'],
-      },
-    },
+    'react/forbid-prop-types': 'off',
+    'react/destructuring-assignment': 'off',
+
+    // PropTypes and states are typed by Flow basically, but Flow cannot type defaultProps.
+    'react/require-default-props': 'off',
   },
 };

.flowconfig

@@ -7,5 +7,4 @@
 [include]
 
 [options]
-module.system.node.resolve_dirname=node_modules
-module.system.node.resolve_dirname=src
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectError

.gitignore

@@ -6,6 +6,9 @@ node_modules/
 # Compiled output
 build
 
+# Generate Types
+__generated__
+
 # Runtime data
 database.sqlite
 

.travis.yml

@@ -1,8 +1,8 @@
 language: node_js
 node_js:
   - 'stable'
+  - '10'
   - '8'
-  - '6'
 env:
   - CXX=g++-4.8
 addons:
@@ -13,6 +13,7 @@ addons:
       - g++-4.8
 cache: yarn
 script:
+  - yarn codegen
   - yarn lint
   - yarn test
   - yarn build --release

apollo.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  client: {
+    service: {
+      name: 'react-starter-kit',
+      url: 'http://localhost:3000/graphql',
+      // optional headers
+      headers: {
+        // authorization: 'Bearer lkjfalkfjadkfjeopknavadf',
+      },
+      // optional disable SSL validation check
+      skipSSLValidation: true,
+    },
+  },
+};

babel.config.js

@@ -19,9 +19,12 @@ module.exports = {
         },
       },
     ],
-    ['@babel/preset-stage-2', { decoratorsLegacy: true }],
     '@babel/preset-flow',
     '@babel/preset-react',
   ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-syntax-dynamic-import',
+  ],
   ignore: ['node_modules', 'build'],
 };

docs/react-style-guide.md

@@ -6,21 +6,21 @@
 
 ### Table of Contents
 
-* [Separate folder per UI component](#separate-folder-per-ui-component)
-* [Prefer using functional components](#prefer-using-functional-components)
-* [Use CSS Modules](#use-css-modules)
-* [Use higher-order components](#use-higher-order-components)
+- [Separate folder per UI component](#separate-folder-per-ui-component)
+- [Prefer using functional components](#prefer-using-functional-components)
+- [Use CSS Modules](#use-css-modules)
+- [Use higher-order components](#use-higher-order-components)
 
 ### Separate folder per UI component
 
-* Place each major UI component along with its resources in a separate folder\
+- Place each major UI component along with its resources in a separate folder\
   This will make it easier to find related resources for any particular UI element
   (CSS, images, unit tests, localization files etc.). Removing such components during
   refactorings should also be easy.
-* Avoid having CSS, images and other resource files shared between multiple
+- Avoid having CSS, images and other resource files shared between multiple
   components.\
   This will make your code more maintainable, easy to refactor.
-* Add `package.json` file into each component's folder.\
+- Add `package.json` file into each component's folder.\
   This will allow to easily reference such components from other places in your code.\
   Use `import Nav from '../Navigation'` instead of `import Nav from '../Navigation/Navigation.js'`
 
@@ -46,7 +46,7 @@ For more information google for
 
 ### Prefer using functional components
 
-* Prefer using stateless functional components whenever possible.\
+- Prefer using stateless functional components whenever possible.\
   Components that don't use state are better to be written as simple pure functions.
 
 ```jsx
@@ -69,16 +69,16 @@ Navigation.propTypes = { items: PropTypes.array.isRequired };
 
 ### Use CSS Modules
 
-* Use CSS Modules\
+- Use CSS Modules\
   This will allow using short CSS class names and at the same time avoid conflicts.
-* Keep CSS simple and declarative. Avoid loops, mixins etc.
-* Feel free to use variables in CSS via
+- Keep CSS simple and declarative. Avoid loops, mixins etc.
+- Feel free to use variables in CSS via
   [precss](https://github.com/jonathantneal/precss) plugin for
   [PostCSS](https://github.com/postcss/postcss)
-* Prefer CSS class selectors instead of element and `id` selectors (see
+- Prefer CSS class selectors instead of element and `id` selectors (see
   [BEM](https://bem.info/))
-* Avoid nested CSS selectors (see [BEM](https://bem.info/))
-* When in doubt, use `.root { }` class name for the root elements of your
+- Avoid nested CSS selectors (see [BEM](https://bem.info/))
+- When in doubt, use `.root { }` class name for the root elements of your
   components
 
 ```scss
@@ -125,14 +125,18 @@ Navigation.propTypes = { items: PropTypes.array.isRequired };
 
 ```jsx
 // Navigation.js
+// @flow
 import React from 'react';
-import PropTypes from 'prop-types';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Navigation.scss';
 
-function Navigation() {
+type PropTypes = {|
+  className: string,
+|};
+
+function Navigation(props: PropTypes) {
   return (
-    <nav className={`${s.root} ${this.props.className}`}>
+    <nav className={`${s.root} ${props.className}`}>
       <ul className={s.items}>
         <li className={`${s.item} ${s.selected}`}>
           <a className={s.link} href="/products">
@@ -149,14 +153,12 @@ function Navigation() {
   );
 }
 
-Navigation.propTypes = { className: PropTypes.string };
-
 export default withStyles(Navigation, s);
 ```
 
 ### Use higher-order components
 
-* Use higher-order components (HOC) to extend existing React components.\
+- Use higher-order components (HOC) to extend existing React components.\
   Here is an example:
 
 ```js

docs/recipes/how-to-integrate-disqus.md

@@ -5,8 +5,8 @@ https://disqus.com/admin/create/
 #### `DisqusThread.js`
 
 ```js
+// @flow
 import React from 'react';
-import PropTypes from 'prop-types';
 
 const SHORTNAME = 'example';
 const WEBSITE_URL = 'http://www.example.com';
@@ -22,13 +22,11 @@ function renderDisqus() {
   }
 }
 
-class DisqusThread extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    path: PropTypes.string.isRequired,
-  };
-
+class DisqusThread extends React.Component<{|
+  id: string,
+  title: string,
+  path: string,
+|}> {
   shouldComponentUpdate(nextProps) {
     return (
       this.props.id !== nextProps.id ||

flow-typed/global.js

@@ -0,0 +1,3 @@
+// @flow
+
+declare type __DEV__ = boolean;