4.2.0

- adds `LOCAL_STORAGE_KEY` to `.env`, to allow saving/retrieving MobX store state to `localStorage` on the client - adds `schema/schema.graphql`, with sample schema for Hacker News stories - refactors `<StateConsumer>` as new `withStore()` HOC in `@/lib/store.ts` - refactors `<HackerNews>` example to use the new auto-generayed `<GetHackerNewsTopStories.Component>` - removes default exports in example components - fixes #150 - React-Hot-Loader 4.7 - renames `@/data/state.ts` -> `@/data/store.ts` (now exports `Store` class) - adds `autosave` and new `rehydrate` funcs in `@/lib/store.ts`, for saving and retrieving MobX state to/from `localStorage` - refactors `@/entry/client.tsx` with new MobX store hydration/auto-save - refactors `@/entry/server.tsx` with new MobX store - adds auto-generated `@/graphql/index.tsx` with query and HOC for getting top HackerNews stories - removes previous `@/lib/mobx.ts` - fixes static runner; removes `koa2-history-api-fallback` package in favour of a local function - adds `HOST` to `.env` and `common.host` in runner to allow binding to non-`localhost` - adds `react-dom` alias to Webpack common config, to use `@hot-loader/react-dom`

Author: leebenson

.env

@@ -1,2 +1,4 @@
+HOST=0.0.0.0
 GRAPHQL=https://graphqlhub.com/graphql
-WS_SUBSCRIPTIONS=0
+WS_SUBSCRIPTIONS=0
+LOCAL_STORAGE_KEY=reactql

.nvmrc

@@ -0,0 +1,9 @@
+overwrite: true
+schema: "schema/schema.graphql"
+documents: "src/**/*.graphql"
+generates:
+ src/graphql/index.tsx:
+ plugins:
+ - "typescript-common"
+ - "typescript-client"
+ - "typescript-react-apollo"

codegen.yml

@@ -1,6 +1,6 @@
 {
  "name": "reactql",
- "version": "4.1.0",
+ "version": "4.2.0",
  "description": "ReactQL - front-end React/GraphQL starter kit",
  "main": "index.js",
  "scripts": {
@@ -9,6 +9,7 @@
  "clean": "rimraf dist",
  "dev": "cross-env RUNNER=development NODE_ENV=development ts-node index.ts",
  "dev:static": "cross-env RUNNER=static NODE_ENV=development ts-node index.ts",
+ "gen:graphql": "gql-gen --config codegen.yml",
  "production": "cross-env RUNNER=production NODE_ENV=production ts-node index.ts",
  "production:clean": "npm run clean && npm run production",
  "start": "npm run dev",
@@ -17,8 +18,9 @@
  "author": "Lee Benson <lee@leebenson.com>",
  "license": "MIT",
  "devDependencies": {
- "@babel/core": "^7.2.2",
+ "@babel/core": "^7.3.3",
  "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+ "@hot-loader/react-dom": "^16.8.2",
  "@types/compression-webpack-plugin": "^2.0.0",
  "@types/history": "^4.7.2",
  "@types/html-webpack-plugin": "^3.2.0",
@@ -27,30 +29,34 @@
  "@types/koa-router": "^7.0.39",
  "@types/koa-send": "^4.1.1",
  "@types/koa-webpack": "^5.0.1",
- "@types/lodash": "^4.14.120",
+ "@types/lodash": "^4.14.121",
  "@types/mini-css-extract-plugin": "^0.2.0",
- "@types/node": "^10.12.18",
+ "@types/node": "^11.9.4",
  "@types/ora": "^3.0.0",
- "@types/prop-types": "^15.5.8",
- "@types/react": "^16.7.21",
- "@types/react-dom": "^16.0.11",
+ "@types/prop-types": "^15.5.9",
+ "@types/react": "^16.8.3",
+ "@types/react-dom": "^16.8.2",
  "@types/react-helmet": "^5.0.8",
  "@types/react-hot-loader": "^4.1.0",
  "@types/react-router-dom": "^4.3.1",
  "@types/require-from-string": "^1.2.0",
- "@types/source-map-support": "^0.4.1",
+ "@types/source-map-support": "^0.4.2",
  "@types/webpack": "^4.4.24",
- "@types/webpack-dev-server": "^3.1.1",
+ "@types/webpack-dev-server": "^3.1.2",
  "@types/webpack-node-externals": "^1.6.3",
  "babel-core": "^6.26.3",
  "babel-loader": "^8.0.5",
- "babel-plugin-emotion": "^10.0.6",
+ "babel-plugin-emotion": "^10.0.7",
  "brotli-webpack-plugin": "^1.1.0",
  "compression-webpack-plugin": "^2.0.0",
  "css-hot-loader": "^1.4.3",
  "css-loader": "^2.1.0",
- "cssnano": "^4.1.8",
+ "cssnano": "^4.1.10",
  "file-loader": "^3.0.1",
+ "graphql-code-generator": "^0.16.1",
+ "graphql-codegen-typescript-client": "^0.16.1",
+ "graphql-codegen-typescript-common": "^0.16.1",
+ "graphql-codegen-typescript-react-apollo": "^0.16.1",
  "html-webpack-plugin": "^3.2.0",
  "koa-webpack": "^5.2.1",
  "less": "^3.9.0",
@@ -60,53 +66,52 @@
  "postcss-loader": "^3.0.0",
  "postcss-preset-env": "^6.5.0",
  "require-from-string": "^2.0.2",
- "resolve-url-loader": "^3.0.0",
+ "resolve-url-loader": "^3.0.1",
  "rimraf": "^2.6.3",
  "sass-loader": "^7.1.0",
  "source-map-support": "^0.5.10",
  "ts-loader": "^5.3.3",
  "ts-node": "^8.0.2",
  "tslint": "^5.12.1",
- "typescript": "^3.2.4",
- "webpack": "^4.29.0",
+ "typescript": "^3.3.3",
+ "webpack": "^4.29.5",
  "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {
- "@emotion/core": "^10.0.6",
- "@emotion/styled": "^10.0.6",
- "apollo-cache-inmemory": "^1.4.2",
- "apollo-client": "^2.4.12",
- "apollo-link": "^1.2.6",
- "apollo-link-error": "^1.1.5",
- "apollo-link-http": "^1.5.9",
+ "@emotion/core": "^10.0.7",
+ "@emotion/styled": "^10.0.7",
+ "apollo-cache-inmemory": "^1.4.3",
+ "apollo-client": "^2.4.13",
+ "apollo-link": "^1.2.8",
+ "apollo-link-error": "^1.1.7",
+ "apollo-link-http": "^1.5.11",
  "apollo-link-state": "^0.4.2",
- "apollo-link-ws": "^1.0.12",
- "apollo-utilities": "^1.1.2",
+ "apollo-link-ws": "^1.0.14",
+ "apollo-utilities": "^1.1.3",
  "chalk": "^2.4.2",
  "cross-env": "^5.2.0",
- "cross-fetch": "^3.0.0",
+ "cross-fetch": "^3.0.1",
  "dotenv": "^6.2.0",
- "emotion": "^10.0.6",
+ "emotion": "^10.0.7",
  "graphql": "^14.1.1",
  "graphql-tag": "^2.10.1",
  "history": "^4.7.2",
  "kcors": "^2.2.2",
- "koa": "^2.6.2",
+ "koa": "^2.7.0",
  "koa-router": "^7.4.0",
  "koa-send": "^5.0.0",
- "koa2-history-api-fallback": "0.0.5",
  "lodash": "^4.17.11",
  "microseconds": "^0.1.0",
  "mobx": "^4.9.2",
  "mobx-react": "^5.4.3",
- "ora": "^3.0.0",
- "react": "^16.7.0",
+ "ora": "^3.1.0",
+ "react": "^16.8.2",
  "react-addons-css-transition-group": "^15.6.2",
  "react-addons-transition-group": "^15.6.2",
- "react-apollo": "^2.4.0",
- "react-dom": "^16.7.0",
+ "react-apollo": "^2.4.1",
+ "react-dom": "^16.8.2",
  "react-helmet": "^5.2.0",
- "react-hot-loader": "^4.6.3",
+ "react-hot-loader": "^4.7.0",
  "react-router-dom": "^4.3.1",
  "subscriptions-transport-ws": "^0.9.15"
  }

package-lock.json

@@ -0,0 +1,17 @@
+type Story {
+ id: String
+ title: String
+ url: String
+}
+
+type HackerNews {
+ topStories: [Story]
+}
+
+type Query {
+ hn: HackerNews
+}
+
+schema {
+ query: Query
+}

package.json

@@ -8,24 +8,15 @@ import * as React from "react";
 
 /* Local */
 
-// `<StateConsumer>` takes a function and passes it our MobX
-// state. Any time the state changes, the children will automatically
-// re-render -- no HOCs or boilerplate required!
-import { StateConsumer } from "@/lib/mobx";
+// `withStore` gives us access to MobX store state
+import { withStore } from "@/lib/store";
 
 // ----------------------------------------------------------------------------
 
-export default class Count extends React.Component {
- public render() {
- return (
- <StateConsumer>
- {state => (
- <>
- <h3>Current count (from MobX): {state.count}</h3>
- <button onClick={state.increment}>Increment</button>
- </>
- )}
- </StateConsumer>
- );
- }
-}
+export const Count = withStore(({ store }) => (
+ <>
+ <h3>Current count (from MobX): {store.count}</h3>
+ <button onClick={store.increment}>Increment</button>
+ <button onClick={() => (store.count = 0)}>Reset</button>
+ </>
+));

schema/schema.graphql

@@ -6,36 +6,16 @@
 /* NPM */
 import * as React from "react";
 
-// Use the `<Query>` component from the React Apollo lib to declaratively
-// fetch the GraphQL data, to display as part of our component
-import { Query } from "react-apollo";
-
 // Emotion styled component
 import styled from "@emotion/styled";
 
 /* Local */
 
 // Query to get top stories from HackerNews
-import hackerNewsQuery from "@/queries/getHackerNewsTopStories";
+import { GetHackerNewsTopStories } from "@/graphql";
 
 // ----------------------------------------------------------------------------
 
-// Typescript types
-
-// Represents a HackerNews story - id, title and url
-interface IHackerNewsStory {
- id: string;
- title: string;
- url: string;
-}
-
-// Represents the data returned by the Hacker News GraphQL query
-interface IHackerNewsTopStories {
- hn: {
- topStories: IHackerNewsStory[];
- };
-}
-
 // Unstyled Emotion parent block, to avoid repeating <style> tags
 // on child elements -- see https://github.com/emotion-js/emotion/issues/1061
 const List = styled.ul``;
@@ -55,17 +35,17 @@ const Story = styled("li")`
 // whatever the server has sent it - or, if it's a client-navigated route that
 // doesn't already have data from the server -- it'll display a loading message
 // while the data is being retrieved
-export default () => (
- <Query<IHackerNewsTopStories> query={hackerNewsQuery}>
- {result => {
+export const HackerNews: React.FunctionComponent = () => (
+ <GetHackerNewsTopStories.Component>
+ {({ data, loading, error }) => {
  // Any errors? Say so!
- if (result.error) {
- return <h1>Error retrieving news stories! &mdash; {result.error}</h1>;
+ if (error) {
+ return <h1>Error retrieving news stories! &mdash; {error}</h1>;
  }
 
  // If the data is still loading, return with a basic
  // message to alert the user
- if (result.loading) {
+ if (loading) {
  return <h1>Loading Hacker News stories...</h1>;
  }
 
@@ -75,16 +55,16 @@ export default () => (
  <>
  <h3>Top stories from Hacker News</h3>
  <List>
- {result.data!.hn.topStories.map(story => (
- <Story key={story.id}>
- <a href={story.url} target="_blank">
- {story.title}
+ {data!.hn!.topStories!.map(story => (
+ <Story key={story!.id!}>
+ <a href={story!.url!} target="_blank">
+ {story!.title}
  </a>
  </Story>
  ))}
  </List>
  </>
  );
  }}
- </Query>
+ </GetHackerNewsTopStories.Component>
 );

src/components/example/count.tsx

@@ -10,10 +10,10 @@ import * as React from "react";
 /* Local */
 
 // Counter, controlled by local Apollo state
-import Count from "./count";
+import { Count } from "./count";
 
 // Hacker News GraphQL example
-import HackerNews from "./hackernews";
+import { HackerNews } from "./hackernews";
 
 // ----------------------------------------------------------------------------
 
@@ -24,7 +24,7 @@ interface IIndexState {
 // Say hello from GraphQL, along with a HackerNews feed fetched by GraphQL
 class Index extends React.PureComponent<{}, IIndexState> {
  public state = {
- dynamic: null
+ dynamic: null,
  };
 
  public componentDidMount = async () => {
@@ -33,7 +33,7 @@ class Index extends React.PureComponent<{}, IIndexState> {
 
  // ... and keep ahold of it locally
  this.setState({
- dynamic: dynamic.default
+ dynamic: dynamic.default,
  });
  };
 

src/components/example/hackernews.tsx

@@ -6,7 +6,7 @@
 /* NPM */
 import * as React from "react";
 import Helmet from "react-helmet";
-import { hot } from "react-hot-loader";
+import { hot } from "react-hot-loader/root";
 import { Route, Switch } from "react-router-dom";
 import { Global } from "@emotion/core";
 
@@ -39,4 +39,4 @@ const Root = () => (
  </div>
 );
 
-export default hot(module)(Root);
+export default hot(Root);