Update with-relay-modern and with-relay-modern-server-express (vercel…

…#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 vercel#6157

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 RelayProvider from './RelayProvider'
+import { fetchQuery, ReactRelayContext } from 'react-relay'
 
 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",
-    "graphql": "^0.13.2",
-    "graphql-relay": "^0.5.5",
-    "isomorphic-unfetch": "^2.0.0",
+    "express-graphql": "^0.7.1",
+    "graphql": "^14.1.1",
+    "graphql-relay": "^0.6.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/withData.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import initEnvironment from './createRelayEnvironment'
-import { fetchQuery } from 'react-relay'
-import RelayProvider from './RelayProvider'
+import { fetchQuery, ReactRelayContext } from 'react-relay'
 
 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",
-    "isomorphic-unfetch": "^2.0.0",
+    "graphql": "^14.1.1",
+    "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"
   }
 }