Pure Apollo integration based on master

- [x] `apollo-client` with full server-side rendering - [x] `apollo-link-state` - Client-side state management with `networkStatus` example - [x] `apollo-server` Without: * Flux (Redux) store - replaced by `apollo-link-state` * Fetch function - No need when you have an `apolloClient`
kriasoft · Sep 4, 2018 · a1dc543 · a1dc543
1 parent 0dbae53
commit a1dc543
Show file tree

Hide file tree

Showing 35 changed files with 2,142 additions and 367 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -46,6 +46,15 @@ module.exports = {
       },
     ],
 
+    // Allow only special identifiers
+    // https://eslint.org/docs/rules/no-underscore-dangle
+    'no-underscore-dangle': [
+      'error',
+      {
+        allow: ['__typename'],
+      },
+    ],
+
     // Prefer destructuring from arrays and objects
     // http://eslint.org/docs/rules/prefer-destructuring
     'prefer-destructuring': [

diff --git a/README.md b/README.md
@@ -21,37 +21,34 @@ and newcomers to the industry.
   <sup><a href="https://x-team.com/join/?utm_source=reactstarterkit&utm_medium=github-link&utm_campaign=reactstarterkit-june">Hiring</a></sup>
 </p>
 
-
 ### Getting Started
 
-  * 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
-
+* 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
 
 ### 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*
+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/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`)
 
 You can see status of most reasonable merge combination as [PRs labeled as `TRACKING`](https://github.com/kriasoft/react-starter-kit/labels/TRACKING)
 
 If you think that any of these features should be on `master`, or vice versa, some features should
 removed from the `master` branch, please [let us know](https://gitter.im/kriasoft/react-starter-kit).
 We love your feedback!
 
-
 ### Comparison
 
 <table width="100%">
@@ -98,12 +95,10 @@ We love your feedback!
     <td align="center">
       <a href="https://github.com/facebook/react">React</a>,
       <a href="https://github.com/ReactJSTraining/history">History</a>,
-      <a href="https://github.com/reactjs/redux">Redux</a>
     </td>
     <td align="center">
       <a href="https://github.com/facebook/react">React</a>,
       <a href="https://github.com/ReactJSTraining/history">History</a>,
-      <a href="https://github.com/reactjs/redux">Redux</a>
     </td>
   </tr>
   <tr>
@@ -149,7 +144,6 @@ We love your feedback!
   </tr>
 </table>
 
-
 ### Backers
 
 ♥ React Starter Kit? Help us keep it alive by donating funds to cover project
@@ -178,7 +172,6 @@ expenses via [OpenCollective](https://opencollective.com/react-starter-kit) or
   <img src="https://opencollective.com/static/images/become_backer.svg" width="64" height="64" alt="">
 </a>
 
-
 ### How to Contribute
 
 Anyone and everyone is welcome to [contribute](CONTRIBUTING.md) to this project. The best way to
@@ -188,35 +181,31 @@ start is by checking our [open issues](https://github.com/kriasoft/react-starter
 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
 
@@ -226,6 +215,7 @@ file. The documentation to the project is licensed under the
 [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/) license.
 
 ---
+
 Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/kriasoft/react-starter-kit/graphs/contributors)
 
 [rsk]: https://www.reactstarterkit.com

diff --git a/docs/README.md b/docs/README.md
@@ -5,7 +5,6 @@
 * [Getting Started](./getting-started.md)
 * [React Style Guide](./react-style-guide.md)
 * [How to configure text editors and IDEs](./how-to-configure-text-editors.md)
-* [Data fetching with WHATWG Fetch](./data-fetching.md)
 * [Testing your application](./testing-your-application.md)
 
 ### Questions
@@ -16,7 +15,6 @@
 ### Recipes
 
 * [How to Implement Routing and Navigation](./recipes/how-to-implement-routing.md)
-* [How to Integrate Redux](./recipes/how-to-integrate-redux.md)
 * [How to Integrate React Intl](./recipes/how-to-integrate-react-intl.md)
 * [How to Integrate Disqus](./recipes/how-to-integrate-disqus.md)
 * [How to Use Sass/SCSS](./recipes/how-to-use-sass.md)

diff --git a/docs/data-fetching.md b/docs/data-fetching.md
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -44,11 +44,6 @@ Before you start, take a moment to see how the project structure looks like:
 └── yarn.lock                   # Fixed versions of all the dependencies
 ```
 
-**Note**: The current version of RSK does not contain a Flux implementation. It
-can be easily integrated with any Flux library of your choice. The most commonly
-used Flux libraries are [Flux](http://facebook.github.io/flux/),
-[Redux](http://redux.js.org/) and [Relay](http://facebook.github.io/relay/).
-
 ### Quick Start
 
 #### 1. Get the latest version

diff --git a/docs/recipes/how-to-integrate-redux.md b/docs/recipes/how-to-integrate-redux.md
diff --git a/jest.config.js b/jest.config.js
@@ -90,7 +90,8 @@ module.exports = {
   // timers: // [string]
 
   transform: {
-    '\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
+    '\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '\\.(gql|graphql)$': '<rootDir>/node_modules/jest-transform-graphql',
     '^(?!.*\\.(js|jsx|json|css|less|styl|scss|sass|sss)$)':
       '<rootDir>/tools/lib/fileTransformer.js',
   },

diff --git a/package.json b/package.json
@@ -14,16 +14,27 @@
   ],
   "dependencies": {
     "@babel/polyfill": "^7.0.0-beta.51",
+    "apollo-cache-inmemory": "^1.2.9",
+    "apollo-client": "^2.4.1",
+    "apollo-link": "^1.2.2",
+    "apollo-link-error": "^1.1.0",
+    "apollo-link-http": "^1.5.4",
+    "apollo-link-logger": "^1.2.3",
+    "apollo-link-schema": "^1.1.0",
+    "apollo-link-state": "^0.4.1",
+    "apollo-server": "^2.0.6",
+    "apollo-server-express": "^2.0.5",
     "body-parser": "^1.18.3",
     "classnames": "^2.2.6",
     "cookie-parser": "^1.4.3",
     "express": "^4.16.3",
-    "express-graphql": "^0.6.12",
     "express-jwt": "^5.3.1",
     "graphql": "^0.13.2",
+    "graphql-tag": "^2.9.2",
     "history": "^4.7.2",
     "isomorphic-style-loader": "^4.0.0",
     "jsonwebtoken": "^8.3.0",
+    "lodash.merge": "^4.6.1",
     "node-fetch": "^2.1.2",
     "normalize.css": "^8.0.0",
     "passport": "^0.4.0",
@@ -32,6 +43,7 @@
     "prop-types": "^15.6.1",
     "query-string": "^6.1.0",
     "react": "^16.4.1",
+    "react-apollo": "^2.1.11",
     "react-dom": "^16.4.1",
     "sequelize": "^4.37.10",
     "serialize-javascript": "^1.5.0",
@@ -77,6 +89,8 @@
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.1.0",
+    "jest-codemods": "^0.15.0",
+    "jest-transform-graphql": "^2.1.0",
     "lint-staged": "^7.2.0",
     "markdown-it": "^8.4.1",
     "mkdirp": "^0.5.1",