Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve feature/apollo-pure #1720

Merged
merged 13 commits into from
Mar 21, 2019
Merged

Improve feature/apollo-pure #1720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
83a3e25
small README.md grammar change (#1675)
rwhitworth Nov 6, 2018
05b091c
Upgrade all dependencies including Babel 7 (#1673)
piglovesyou Feb 19, 2019
835aab1
Resolve conflict and follow upstream/master
piglovesyou Feb 19, 2019
34fe9f3
update apollo packages
piglovesyou Feb 27, 2019
2082715
Use new local state management of Apollo Client 2.5
piglovesyou Feb 27, 2019
c15b123
bye apollo-link-state
piglovesyou Feb 28, 2019
0f50968
mod: better suppressing flow error for .graphql import
piglovesyou Mar 14, 2019
47e4e50
fix: jest error by updating jest
piglovesyou Mar 15, 2019
27ba7d3
Merge pull request #7 from piglovesyou/mod-graphql-import-for-flow
piglovesyou Mar 15, 2019
64f9b1b
Upgrade all dependencies
piglovesyou Mar 21, 2019
28fabb3
refac: Use functional component for components
piglovesyou Mar 21, 2019
1ad586c
fix: resolve apollo and graphql versions problem
piglovesyou Mar 21, 2019
c15d8c9
Merge pull request #9 from piglovesyou/upgrade-deps
piglovesyou Mar 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .flowconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
62 changes: 31 additions & 31 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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

Expand Down
10 changes: 7 additions & 3 deletions flow-typed/npm/isomorphic-style-loader_vx.x.x.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand All @@ -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'>;
}
167 changes: 83 additions & 84 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
28 changes: 14 additions & 14 deletions src/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down
Loading