Merge pull request #118 from thiagoleitedev/chore/relay-react-experim…

…ental Propostal to use relay experimental
entria · Nov 20, 2019 · 7ed1708 · 7ed1708
2 parents a78e9d3 + 4f9c4bd
commit 7ed1708
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 52 deletions.
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -4,10 +4,11 @@
   "version": "1.0.0",
   "dependencies": {
     "hoist-non-react-statics": "^3.0.1",
-    "react": "0.0.0-experimental-f6b8d31a7",
-    "react-dom": "0.0.0-experimental-f6b8d31a7",
-    "react-relay": "^5.0.0",
+    "react": "^0.0.0-experimental-b53ea6ca0",
+    "react-dom": "^0.0.0-experimental-b53ea6ca0",
+    "react-relay": "^0.0.0-experimental-a1a40b68",
     "rebass": "^4.0.2",
+    "relay-runtime": "^7.1.0",
     "styled-components": "^4.2.0",
     "styled-system": "^5.0.20"
   },
@@ -16,7 +17,6 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
-    "@hot-loader/react-dom": "^16.10.2",
     "@testing-library/jest-dom": "^4.2.0",
     "@testing-library/react": "^9.3.1",
     "@types/hoist-non-react-statics": "^3.3.1",
@@ -31,13 +31,14 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.4",
+    "babel-plugin-relay": "^7.1.0",
     "core-js": "^3.1.4",
     "cross-env": "^5.2.0",
     "css-loader": "^3.2.0",
     "eslint": "^6.1.0",
     "eslint-plugin-react": "^7.11.1",
     "file-loader": "^4.2.0",
-    "graphql": "^14.2.1",
+    "graphql": "^14.5.8",
     "graphql-compiler": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.9.0",
@@ -47,9 +48,9 @@
     "jest-runner-eslint": "^0.7.5",
     "jest-serializer-html": "^7.0.0",
     "mini-css-extract-plugin": "^0.8.0",
-    "react-hot-loader": "^4.8.5",
+    "react-hot-loader": "^4.12.17",
     "regenerator-runtime": "^0.13.2",
-    "relay-compiler": "^5.0.0",
+    "relay-compiler": "^7.1.0",
     "relay-compiler-language-typescript": "^4.0.0",
     "relay-devtools": "^1.4.0",
     "relay-runtime": "^5.0.0",

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -1,10 +1,21 @@
-import React from 'react';
+import React, { Suspense } from 'react';
+import { RelayEnvironmentProvider } from 'react-relay/hooks';
+import RelayEnvironment from './relay/Environment';
+import ErrorBoundary from './ErrorBoundary';
 import { hot } from 'react-hot-loader';
 
-import UserList from './UserList';
+const UserList = React.lazy(() => import('./UserList'));
 
 function App() {
-  return <UserList />;
+  return (
+    <RelayEnvironmentProvider environment={RelayEnvironment}>
+      <ErrorBoundary>
+        <Suspense fallback={'Loading...'}>
+          <UserList />
+        </Suspense>
+      </ErrorBoundary>
+    </RelayEnvironmentProvider>
+  );
 }
 
 export default hot(module)(App);
diff --git a/packages/web/src/ErrorBoundary.tsx b/packages/web/src/ErrorBoundary.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+type Props = {
+  children: React.ReactNode;
+};
+type State = {
+  error: Error | null;
+};
+
+export default class ErrorBoundary extends React.Component<Props, State> {
+  state = { error: null };
+
+  static getDerivedStateFromError(error: any) {
+    return {
+      error,
+    };
+  }
+
+  render() {
+    if (this.state.error != null) {
+      return (
+        <div>
+          <div>Error: {this.state.error.message}</div>
+          <div>
+            <pre>{JSON.stringify(this.state.error.source, null, 2)}</pre>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx
@@ -1,5 +1,5 @@
-import "core-js/stable";
-import "regenerator-runtime/runtime";
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -8,4 +8,4 @@ import App from './App';
 const root = document.createElement('div');
 document.body.appendChild(root);
 
-ReactDOM.render(<App />, root);
+ReactDOM.createRoot(root).render(<App />);
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
@@ -5,6 +5,7 @@
     "allowJs": false,           /* Allow javascript files to be compiled. */
     "checkJs": false,           /* Report errors in .js files. */
     "jsx": "react",             /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "types": ["react-dom/experimental"]
   },
   "include": [
     "./src/**/*"

diff --git a/packages/web/webpack.config.js b/packages/web/webpack.config.js
@@ -37,9 +37,6 @@ module.exports = {
   devtool: 'cheap-eval-source-map',
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
-    alias: {
-      'react-dom': '@hot-loader/react-dom'
-    }
   },
   module: {
     rules: [