Fix examples with relay-compiler (#10976)

* Example with-react-relay-network-modern: update dependencies

* Example with-react-relay-network-modern: move relay __generated__ out of pages dir

* Example with-react-relay-network-modern: fix some errors

- Without checking if props.allBlogPosts exists it fails sometimes on
  "TypeError: Cannot read property 'edges' of undefined"

- I have no idea how it could work before with Component.query().params.name,
  but maybe some dependent library API has changed

* Example with-relay-modern-server-express: update dependencies

* Example with-relay-modern-server-express: move relay __generated__ out of pages dir

Fixes Error: Build optimization failed: found page without a React Component as default export in
pages/__generated__/pages_indexQuery.graphql

* Example with-relay-modern: update dependencies

* Example with-react-relay-network-modern: fix prettier errors

examples/with-react-relay-network-modern/.babelrc

@@ -3,6 +3,6 @@
     "next/babel"
   ],
   "plugins": [
-    "relay"
+    ["relay", { artifactDirectory: "__generated__" }]
   ]
-}
+}

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

@@ -6,9 +6,10 @@ const BlogPosts = props => {
   return (
     <div>
       <h1>Blog posts</h1>
-      {props.viewer.allBlogPosts.edges.map(({ node }) => (
-        <BlogPostPreview key={node.id} post={node} />
-      ))}
+      {props.viewer.allBlogPosts &&
+        props.viewer.allBlogPosts.edges.map(({ node }) => (
+          <BlogPostPreview key={node.id} post={node} />
+        ))}
     </div>
   )
 }

examples/with-react-relay-network-modern/package.json

@@ -7,27 +7,27 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**'  '**/__generated__/**' --exclude '**/schema/**' --schema ./schema/schema.graphql",
+    "relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**'  '**/__generated__/**' --exclude '**/schema/**' --schema ./schema/schema.graphql --artifactDirectory __generated__",
     "schema": "graphql get-schema -e dev"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "dotenv": "^8.0.0",
     "dotenv-webpack": "^1.5.4",
-    "graphql": "^14.3.0",
+    "graphql": "^14.6.0",
     "isomorphic-fetch": "^2.2.1",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-relay": "^5.0.0",
-    "react-relay-network-modern": "^4.0.0",
-    "react-relay-network-modern-ssr": "^1.2.2"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-relay": "^9.0.0",
+    "react-relay-network-modern": "^4.5.0",
+    "react-relay-network-modern-ssr": "^1.4.0"
   },
   "devDependencies": {
-    "babel-plugin-relay": "^5.0.0",
+    "babel-plugin-relay": "^9.0.0",
     "graphcool": "^1.2.1",
     "graphql-cli": "^3.0.11",
-    "relay-compiler": "^5.0.0"
+    "relay-compiler": "^9.0.0"
   }
 }

examples/with-react-relay-network-modern/pages/_app.js

@@ -35,7 +35,7 @@ export default class App extends NextApp {
     const environment = createEnvironment(
       relayData,
       JSON.stringify({
-        queryID: Component.query ? Component.query().params.name : undefined,
+        queryID: Component.query ? Component.query.params.name : undefined,
         variables,
       })
     )

examples/with-relay-modern-server-express/.babelrc

@@ -3,6 +3,6 @@
     "next/babel"
   ],
   "plugins": [
-    "relay"
+    ["relay", { artifactDirectory: "__generated__" }]
   ]
 }

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

@@ -8,25 +8,25 @@
     "build": "next build",
     "prestart": "npm run build",
     "start": "NODE_ENV=production node server",
-    "relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**'  '**/__generated__/**' '**/server/**' --schema ./server/schema.graphql --verbose"
+    "relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**'  '**/__generated__/**' '**/server/**' --schema ./server/schema.graphql --artifactDirectory __generated__ --verbose"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "dotenv": "^4.0.0",
     "dotenv-webpack": "^1.5.4",
-    "express-graphql": "^0.7.1",
-    "graphql": "^14.1.1",
+    "express-graphql": "^0.9.0",
+    "graphql": "^14.6.0",
     "graphql-relay": "^0.6.0",
     "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-relay": "^5.0.0"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-relay": "^9.0.0"
   },
   "devDependencies": {
-    "babel-plugin-relay": "^2.0.0",
+    "babel-plugin-relay": "^9.0.0",
     "graphql-cli": "^1.0.0-beta.4",
-    "relay-compiler": "^2.0.0"
+    "relay-compiler": "^9.0.0"
   }
 }

examples/with-relay-modern/package.json

@@ -15,17 +15,17 @@
   "dependencies": {
     "dotenv": "^8.2.0",
     "dotenv-webpack": "^1.7.0",
-    "graphql": "^14.5.8",
+    "graphql": "^14.6.0",
     "isomorphic-unfetch": "^3.0.0",
     "next": "latest",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-relay": "^8.0.0"
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-relay": "^9.0.0"
   },
   "devDependencies": {
-    "babel-plugin-relay": "^8.0.0",
+    "babel-plugin-relay": "^9.0.0",
     "graphcool": "^1.4.0",
     "graphql-cli": "^3.0.14",
-    "relay-compiler": "^8.0.0"
+    "relay-compiler": "^9.0.0"
   }
 }