Update with-relay-modern and with-relay-modern-server-express (#6182)

Update examples with-relay-modern and with-relay-modern-server-express to react-relay 2.0.0

- react-relay has started to use new Context API instead of Legacy Context API
- add `parseInt` because graphql 14.0.0 introduced stricter scalar value coercion

Closes #6157

examples/with-relay-modern-server-express/lib/RelayProvider.js

@@ -1,31 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-// Thank you https://github.com/robrichard
-// https://github.com/robrichard/relay-context-provider
-
-class RelayProvider extends React.Component {
-  getChildContext () {
-    return {
-      relay: {
-        environment: this.props.environment,
-        variables: this.props.variables
-      }
-    }
-  }
-  render () {
-    return this.props.children
-  }
-}
-
-RelayProvider.childContextTypes = {
-  relay: PropTypes.object.isRequired
-}
-
-RelayProvider.propTypes = {
-  environment: PropTypes.object.isRequired,
-  variables: PropTypes.object.isRequired,
-  children: PropTypes.node
-}
-
-export default RelayProvider

examples/with-relay-modern-server-express/lib/withData.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import initEnvironment from './createRelayEnvironment'
-import { fetchQuery } from 'react-relay'
+import { fetchQuery, ReactRelayContext } from 'react-relay'
-import RelayProvider from './RelayProvider'
 
 export default (ComposedComponent, options = {}) => {
   return class WithData extends React.Component {
@@ -45,9 +44,9 @@ export default (ComposedComponent, options = {}) => {
 
     render () {
       return (
-        <RelayProvider environment={this.environment} variables={{}}>
+        <ReactRelayContext.Provider value={{ environment: this.environment, variables: {} }}>
           <ComposedComponent {...this.props} />
-        </RelayProvider>
+        </ReactRelayContext.Provider>
       )
     }
   }

examples/with-relay-modern-server-express/package.json

@@ -15,18 +15,18 @@
   "dependencies": {
     "dotenv": "^4.0.0",
     "dotenv-webpack": "^1.5.4",
-    "express-graphql": "^0.6.12",
+    "express-graphql": "^0.7.1",
-    "graphql": "^0.13.2",
+    "graphql": "^14.1.1",
-    "graphql-relay": "^0.5.5",
+    "graphql-relay": "^0.6.0",
-    "isomorphic-unfetch": "^2.0.0",
+    "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-relay": "^1.5.0"
+    "react-relay": "^2.0.0"
   },
   "devDependencies": {
-    "babel-plugin-relay": "^1.4.1",
+    "babel-plugin-relay": "^2.0.0",
     "graphql-cli": "^1.0.0-beta.4",
-    "relay-compiler": "^1.5.0"
+    "relay-compiler": "^2.0.0"
   }
 }

examples/with-relay-modern-server-express/pages/index.js

@@ -14,7 +14,12 @@ class Index extends Component {
     }
 
     return {
-      relayVariables: { after, before, first, last }
+      relayVariables: {
+        after,
+        before,
+        first: parseInt(first, 10),
+        last: parseInt(last, 10)
+      }
     }
   }
 

examples/with-relay-modern/lib/RelayProvider.js

@@ -1,31 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-// Thank you https://github.com/robrichard
-// https://github.com/robrichard/relay-context-provider
-
-class RelayProvider extends React.Component {
-  getChildContext () {
-    return {
-      relay: {
-        environment: this.props.environment,
-        variables: this.props.variables
-      }
-    }
-  }
-  render () {
-    return this.props.children
-  }
-}
-
-RelayProvider.childContextTypes = {
-  relay: PropTypes.object.isRequired
-}
-
-RelayProvider.propTypes = {
-  environment: PropTypes.object.isRequired,
-  variables: PropTypes.object.isRequired,
-  children: PropTypes.node
-}
-
-export default RelayProvider

examples/with-relay-modern/lib/withData.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import initEnvironment from './createRelayEnvironment'
-import { fetchQuery } from 'react-relay'
+import { fetchQuery, ReactRelayContext } from 'react-relay'
-import RelayProvider from './RelayProvider'
 
 export default (ComposedComponent, options = {}) => {
   return class WithData extends React.Component {
@@ -47,9 +46,9 @@ export default (ComposedComponent, options = {}) => {
 
     render () {
       return (
-        <RelayProvider environment={this.environment} variables={{}}>
+        <ReactRelayContext.Provider value={{ environment: this.environment, variables: {} }}>
           <ComposedComponent {...this.props} />
-        </RelayProvider>
+        </ReactRelayContext.Provider>
       )
     }
   }

examples/with-relay-modern/package.json

@@ -15,17 +15,17 @@
   "dependencies": {
     "dotenv": "^4.0.0",
     "dotenv-webpack": "^1.5.4",
-    "graphql": "^0.13.2",
+    "graphql": "^14.1.1",
-    "isomorphic-unfetch": "^2.0.0",
+    "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-relay": "^1.5.0"
+    "react-relay": "^2.0.0"
   },
   "devDependencies": {
-    "babel-plugin-relay": "^1.4.1",
+    "babel-plugin-relay": "^2.0.0",
     "graphcool": "^1.2.1",
     "graphql-cli": "^1.0.0-beta.4",
-    "relay-compiler": "^1.5.0"
+    "relay-compiler": "^2.0.0"
   }
 }