feat: deprecate react 15 support, support react 16 features

- use UNSAFE_ for one componentWillUpdateProps
- refact for another componentWillUpdateProps
- deprecate peer resolution for react 15
- dev dependencies bumped to react 16
- react-test-renderer and enzyme bumped to react 16

Created-By: @ryan-m-walker, @acao
BREAKING CHANGE: Deprecate support for React 15. Please use React 16.8 or greater for hooks support.

Author: acao

examples/graphiql-webpack/package.json

@@ -13,7 +13,7 @@
     "express-graphql": "^0.9.0",
     "graphiql": "file:../../packages/graphiql",
     "graphql": "14.5.8",
-    "react": "16.10.2"
+    "react": "16.12.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "7.7.4",

packages/graphiql/package.json

@@ -51,15 +51,15 @@
   "peerDependencies": {
     "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0",
     "prop-types": ">=15.5.0",
-    "react": "^15.6.0 || ^16.0.0",
-    "react-dom": "^15.6.0 || ^16.0.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "cross-env": "^6.0.3",
     "css-loader": "3.3.2",
     "cssnano": "^4.1.10",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-15": "^1.4.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
     "express": "5.0.0-alpha.5",
     "express-graphql": "0.9.0",
     "graphql": "14.5.8",
@@ -72,10 +72,10 @@
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "prop-types": "15.7.2",
-    "react": "15.6.2",
-    "react-dom": "15.6.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-hot-loader": "^4.12.18",
-    "react-test-renderer": "15.6.2",
+    "react-test-renderer": "^16.12.0",
     "rimraf": "^3.0.0",
     "serve": "^11.2.0",
     "start-server-and-test": "^1.10.6",

packages/graphiql/src/components/GraphiQL.js

@@ -39,6 +39,19 @@ import {
 
 const DEFAULT_DOC_EXPLORER_WIDTH = 350;
 
+// eslint-disable-next-line no-console
+const logger = console.log;
+
+if (!React.version || !React.version.indexOf('16') < 0) {
+  logger.warn(
+    [
+      'GraphiQL 0.18.0 and after is not compatible with React 15 or below.',
+      'If you are using a CDN source (jsdelivr, unpkg, etc), follow this example:',
+      'https://github.com/graphql/graphiql/blob/master/examples/graphiql-cdn/index.html#L49',
+    ].join('\n'),
+  );
+}
+
 /**
  * The top-level React component for GraphiQL, intended to encompass the entire
  * browser viewport.
@@ -171,8 +184,9 @@ export class GraphiQL extends React.Component {
 
     global.g = this;
   }
-
-  componentWillReceiveProps(nextProps) {
+  // todo: these values should be updated in a reducer imo
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(nextProps) {
     let nextSchema = this.state.schema;
     let nextQuery = this.state.query;
     let nextVariables = this.state.variables;

packages/graphiql/src/components/QueryHistory.js

@@ -14,32 +14,26 @@ import HistoryQuery from './HistoryQuery';
 const MAX_QUERY_SIZE = 100000;
 const MAX_HISTORY_LENGTH = 20;
 
-const shouldSaveQuery = (nextProps, current, lastQuerySaved) => {
-  if (nextProps.queryID === current.queryID) {
-    return false;
-  }
+const shouldSaveQuery = (query, variables, lastQuerySaved) => {
   try {
-    parse(nextProps.query);
+    parse(query);
   } catch (e) {
     return false;
   }
   // Don't try to save giant queries
-  if (nextProps.query.length > MAX_QUERY_SIZE) {
+  if (query.length > MAX_QUERY_SIZE) {
     return false;
   }
   if (!lastQuerySaved) {
     return true;
   }
-  if (
-    JSON.stringify(nextProps.query) === JSON.stringify(lastQuerySaved.query)
-  ) {
+  if (JSON.stringify(query) === JSON.stringify(lastQuerySaved.query)) {
     if (
-      JSON.stringify(nextProps.variables) ===
-      JSON.stringify(lastQuerySaved.variables)
+      JSON.stringify(variables) === JSON.stringify(lastQuerySaved.variables)
     ) {
       return false;
     }
-    if (!nextProps.variables && !lastQuerySaved.variables) {
+    if (variables && !lastQuerySaved.variables) {
       return false;
     }
   }
@@ -71,25 +65,6 @@ export class QueryHistory extends React.Component {
     this.state = { queries };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (
-      shouldSaveQuery(nextProps, this.props, this.historyStore.fetchRecent())
-    ) {
-      const item = {
-        query: nextProps.query,
-        variables: nextProps.variables,
-        operationName: nextProps.operationName,
-      };
-      this.historyStore.push(item);
-      const historyQueries = this.historyStore.items;
-      const favoriteQueries = this.favoriteStore.items;
-      const queries = historyQueries.concat(favoriteQueries);
-      this.setState({
-        queries,
-      });
-    }
-  }
-
   render() {
     const queries = this.state.queries.slice().reverse();
     const queryNodes = queries.map((query, i) => {
@@ -114,6 +89,22 @@ export class QueryHistory extends React.Component {
     );
   }
 
+  updateHistory = (query, variables, operationName) => {
+    if (shouldSaveQuery(query, variables, this.historyStore.fetchRecent())) {
+      this.historyStore.push({
+        query,
+        variables,
+        operationName,
+      });
+      const historyQueries = this.historyStore.items;
+      const favoriteQueries = this.favoriteStore.items;
+      const queries = historyQueries.concat(favoriteQueries);
+      this.setState({
+        queries,
+      });
+    }
+  };
+
   toggleFavorite = (query, variables, operationName, label, favorite) => {
     const item = {
       query,

resources/enzyme.config.js

@@ -12,7 +12,7 @@ require('@babel/polyfill', {
 
 // if (process.env.ENZYME) {
 const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-15');
+const Adapter = require('enzyme-adapter-react-16');
 configure({ adapter: new Adapter() });
 // }