Update Relay Modern example (#10150)

* chore(npm): update dependencies

* fix(relay): move GraphQL query outside pages folder

* refactor(react): destructure props

* refactor(react): remove unused key and simplify syntax

examples/with-relay-modern/components/BlogPostPreview.js

@@ -1,9 +1,7 @@
 import React from 'react'
 import { createFragmentContainer, graphql } from 'react-relay'
 
-const BlogPostPreview = props => {
-  return <div key={props.post.id}>{props.post.title}</div>
-}
+const BlogPostPreview = ({ post }) => <li>{post.title}</li>
 
 export default createFragmentContainer(BlogPostPreview, {
   post: graphql`

examples/with-relay-modern/components/BlogPosts.js

@@ -2,16 +2,16 @@ import React from 'react'
 import { createFragmentContainer, graphql } from 'react-relay'
 import BlogPostPreview from './BlogPostPreview'
 
-const BlogPosts = props => {
-  return (
-    <div>
-      <h1>Blog posts</h1>
-      {props.viewer.allBlogPosts.edges.map(({ node }) => (
+const BlogPosts = ({ viewer }) => (
+  <div>
+    <h1>Blog posts</h1>
+    <ul>
+      {viewer.allBlogPosts.edges.map(({ node }) => (
         <BlogPostPreview key={node.id} post={node} />
       ))}
-    </div>
-  )
-}
+    </ul>
+  </div>
+)
 
 export default createFragmentContainer(BlogPosts, {
   viewer: graphql`

examples/with-relay-modern/package.json

@@ -1,31 +1,31 @@
 {
   "name": "with-relay-modern",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Example of Next.js with Relay Modern SSR",
   "scripts": {
     "graphcool-init": "graphcool init --schema schema/init-schema.graphql",
     "dev": "next",
     "build": "next build",
     "start": "next start",
     "relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**'  '**/__generated__/**' --exclude '**/schema/**' --schema ./schema/schema.graphql",
-    "schema": "graphql get-schema dev"
+    "schema": "graphql get-schema -e dev"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "dotenv": "^4.0.0",
-    "dotenv-webpack": "^1.5.4",
-    "graphql": "^14.1.1",
+    "dotenv": "^8.2.0",
+    "dotenv-webpack": "^1.7.0",
+    "graphql": "^14.5.8",
     "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-relay": "^5.0.0"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-relay": "^8.0.0"
   },
   "devDependencies": {
-    "babel-plugin-relay": "^2.0.0",
-    "graphcool": "^1.2.1",
-    "graphql-cli": "^1.0.0-beta.4",
-    "relay-compiler": "^2.0.0"
+    "babel-plugin-relay": "^8.0.0",
+    "graphcool": "^1.4.0",
+    "graphql-cli": "^3.0.14",
+    "relay-compiler": "^8.0.0"
   }
 }

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

@@ -1,26 +1,14 @@
-import React, { Component } from 'react'
-import { graphql } from 'react-relay'
+import React from 'react'
 import withData from '../lib/withData'
 import BlogPosts from '../components/BlogPosts'
+import indexPageQuery from '../queries/indexPage'
 
-class Index extends Component {
-  static displayName = `Index`
-
-  render(props) {
-    return (
-      <div>
-        <BlogPosts viewer={this.props.viewer} />
-      </div>
-    )
-  }
-}
+const Index = ({ viewer }) => (
+  <div>
+    <BlogPosts viewer={viewer} />
+  </div>
+)
 
 export default withData(Index, {
-  query: graphql`
-    query pages_indexQuery {
-      viewer {
-        ...BlogPosts_viewer
-      }
-    }
-  `,
+  query: indexPageQuery,
 })

examples/with-relay-modern/queries/indexPage.js

@@ -0,0 +1,9 @@
+import { graphql } from 'react-relay'
+
+export default graphql`
+  query indexPage_indexQuery {
+    viewer {
+      ...BlogPosts_viewer
+    }
+  }
+`