feat: Support Relay v2.x (#167)

package.json

@@ -12,7 +12,7 @@
     "lint": "eslint src test",
     "precommit": "lint-staged",
     "prepublish": "npm run build",
-    "relay-compiler": "relay-compiler --src test --schema test/fixtures/schema.graphql",
+    "relay-compiler": "relay-compiler --watchman false --src test --schema test/fixtures/schema.graphql",
     "tdd": "jest --watch",
     "test": "npm run build-fixtures && npm run lint && npm run testonly -- --coverage",
     "testonly": "jest --runInBand --verbose",
@@ -71,16 +71,16 @@
   },
   "peerDependencies": {
     "found": ">=0.3.8",
-    "react": "^0.14.9 || >=15.3.0",
-    "react-relay": ">=1.4.0"
+    "react": ">=16.5.0",
+    "react-relay": "^2.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^23.6.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-relay": "^1.6.2",
+    "babel-plugin-relay": "^2.0.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
@@ -98,18 +98,18 @@
     "eslint-plugin-react": "^7.11.1",
     "farce": "^0.2.6",
     "found": "^0.4.0-alpha.4",
-    "graphql": "^0.13.2",
+    "graphql": "^14.1.0",
     "husky": "^0.14.3",
     "jest": "^23.6.0",
     "lint-staged": "^7.2.2",
     "p-defer": "^1.0.0",
     "prettier": "^1.14.2",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
-    "react-relay": "^1.6.2",
-    "relay-compiler": "^1.6.2",
+    "react-relay": "^2.0.0",
+    "relay-compiler": "^2.0.0",
     "relay-local-schema": "^0.7.0",
-    "relay-runtime": "^1.6.2",
+    "relay-runtime": "^2.0.0",
     "rimraf": "^2.6.2"
   }
 }

src/modern/QuerySubscription.js

@@ -7,18 +7,11 @@ export default class QuerySubscription {
     this.dataFrom = dataFrom;
 
     const {
-      createOperationSelector,
+      createOperationDescriptor,
       getRequest,
-      getOperation,
     } = this.environment.unstable_internal;
 
-    // FIXME: Use getRequest directly when only supporting relay >=1.5.0.
-    const getRequestOrOperation = getRequest || getOperation;
-
-    this.operation = createOperationSelector(
-      getRequestOrOperation(query),
-      variables,
-    );
+    this.operation = createOperationDescriptor(getRequest(query), variables);
 
     this.fetchPromise = null;
     this.selectionReference = null;

src/modern/ReadyStateRenderer.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
 import React from 'react';
-import RelayPropTypes from 'react-relay/lib/RelayPropTypes';
+import { ReactRelayContext } from 'react-relay';
 import warning from 'warning';
 
 import getQueryName from './getQueryName';
@@ -22,13 +22,9 @@ const propTypes = {
   fetched: PropTypes.bool.isRequired,
 };
 
-const childContextTypes = {
-  relay: RelayPropTypes.Relay,
-};
-
 class ReadyStateRenderer extends React.Component {
-  constructor(props, context) {
-    super(props, context);
+  constructor(props) {
+    super(props);
 
     const { element, querySubscription } = props;
 
@@ -37,15 +33,6 @@ class ReadyStateRenderer extends React.Component {
     };
 
     this.selectionReference = querySubscription.retain();
-
-    this.relayContext = {};
-    this.updateRelayContext(querySubscription);
-  }
-
-  getChildContext() {
-    return {
-      relay: this.relayContext,
-    };
   }
 
   componentDidMount() {
@@ -65,8 +52,6 @@ class ReadyStateRenderer extends React.Component {
 
       this.props.querySubscription.unsubscribe(this.onUpdate);
       querySubscription.subscribe(this.onUpdate);
-
-      this.updateRelayContext(querySubscription);
     }
   }
 
@@ -102,12 +87,6 @@ class ReadyStateRenderer extends React.Component {
     this.setState({ element: element || null });
   };
 
-  updateRelayContext(querySubscription) {
-    // XXX: Relay v1.6.0 adds an assumption that context.relay is mutated
-    // in-place, so we need to do that here.
-    Object.assign(this.relayContext, querySubscription.relayContext);
-  }
-
   render() {
     const { element } = this.state;
     if (!element) {
@@ -144,11 +123,14 @@ class ReadyStateRenderer extends React.Component {
       });
     }
 
-    return React.cloneElement(element, ownProps);
+    return (
+      <ReactRelayContext.Provider value={querySubscription.relayContext}>
+        {React.cloneElement(element, ownProps)}
+      </ReactRelayContext.Provider>
+    );
   }
 }
 
 ReadyStateRenderer.propTypes = propTypes;
-ReadyStateRenderer.childContextTypes = childContextTypes;
 
 export default ReadyStateRenderer;

src/modern/Resolver.js

@@ -18,8 +18,6 @@ export default class Resolver {
   constructor(environment) {
     this.environment = environment;
 
-    this.lastQueries = [];
-    this.lastRouteVariables = [];
     this.lastQuerySubscriptions = [];
   }
 
@@ -141,8 +139,6 @@ export default class Resolver {
       }
     });
 
-    this.lastQueries = queries;
-    this.lastRouteVariables = routeVariables;
     this.lastQuerySubscriptions = querySubscriptions;
 
     return querySubscriptions;

src/modern/getQueryName.js

@@ -6,7 +6,9 @@ export default function getQueryName(route) {
     }
 
     if (typeof query === 'function') {
-      return query().name;
+      query = query();
+      if (query.name) return query.name;
+      if (query.params && query.params.name) return query.params.name;
     }
   }