feat(example): add react-relay-network-modern example (#5349)

In this example, we can:
- `QueryRenderer` SSR
- caching the data
- use the feature of `react-relay-network-modern` which is the powerful tool for `relay-modern`

I copy the example `with-relay-modern`, but I just modified the code. Some detail are not modified.
If you think this example is needed, I will fix those. Otherwise, close this **PR** to let me know this example is not needed.

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

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    "relay"
+  ]
+}

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

@@ -0,0 +1 @@
+RELAY_ENDPOINT=https://api.graph.cool/relay/v1/next-js-with-relay-modern-example

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

@@ -0,0 +1,2 @@
+__generated__/
+schema/schema.graphql

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

@@ -0,0 +1,8 @@
+{
+  "schemaPath": "schema/schema.graphql",
+  "extensions": {
+    "endpoints": {
+      "dev": "https://api.graph.cool/relay/v1/next-js-with-relay-modern-example"
+    }
+  }
+}

examples/with-react-relay-network-modern/README.md

@@ -0,0 +1,70 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-relay-modern)
+
+# Relay Modern Example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-relay-modern with-relay-modern-app
+# or
+yarn create next-app --example with-relay-modern with-relay-modern-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-relay-modern
+cd with-relay-modern
+```
+
+Install it:
+
+```bash
+npm install
+# or
+yarn
+```
+
+Download schema introspection data from configured Relay endpoint
+
+```bash
+npm run schema
+# or
+yarn schema
+```
+
+Run Relay ahead-of-time compilation (should be re-run after any edits to components that query data with Relay)
+
+```bash
+npm run relay
+# or
+yarn relay
+```
+
+Run the project
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## The idea behind the example
+
+[Relay Modern](https://facebook.github.io/relay/docs/relay-modern.html) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
+
+In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded.
+
+This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { createFragmentContainer, graphql } from 'react-relay'
+
+const BlogPostPreview = props => {
+  return (
+    <div key={props.post.id}>{props.post.title}</div>
+  )
+}
+
+export default createFragmentContainer(BlogPostPreview, {
+  post: graphql`
+        fragment BlogPostPreview_post on BlogPost {
+            id
+            title
+        }
+    `
+})

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

@@ -0,0 +1,29 @@
+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 }) =>
+        <BlogPostPreview key={node.id}post={node} />
+      )}
+    </div>
+  )
+}
+
+export default createFragmentContainer(BlogPosts, {
+  viewer: graphql`
+        fragment BlogPosts_viewer on Viewer {
+            allBlogPosts(first: 10, orderBy: createdAt_DESC) {
+                edges {
+                    node {
+                        ...BlogPostPreview_post
+                        id
+                    }
+                }
+            }
+        }
+    `
+})

examples/with-react-relay-network-modern/lib/createEnvironment/client.js

@@ -0,0 +1,36 @@
+import {
+  RelayNetworkLayer,
+  cacheMiddleware,
+  urlMiddleware
+} from 'react-relay-network-modern/node8'
+import RelaySSR from 'react-relay-network-modern-ssr/node8/client'
+import { Environment, RecordSource, Store } from 'relay-runtime'
+
+const source = new RecordSource()
+const store = new Store(source)
+
+let storeEnvironment = null
+
+export default {
+  createEnvironment: relayData => {
+    if (storeEnvironment) return storeEnvironment
+
+    storeEnvironment = new Environment({
+      store,
+      network: new RelayNetworkLayer([
+        cacheMiddleware({
+          size: 100,
+          ttl: 60 * 1000
+        }),
+        new RelaySSR(relayData).getMiddleware({
+          lookup: false
+        }),
+        urlMiddleware({
+          url: req => process.env.RELAY_ENDPOINT
+        })
+      ])
+    })
+
+    return storeEnvironment
+  }
+}

examples/with-react-relay-network-modern/lib/createEnvironment/index.js

@@ -0,0 +1,6 @@
+import 'isomorphic-fetch'
+
+export const { initEnvironment, createEnvironment } = (!process.browser
+  ? require('./server')
+  : require('./client')
+).default

examples/with-react-relay-network-modern/lib/createEnvironment/server.js

@@ -0,0 +1,35 @@
+import { RelayNetworkLayer, urlMiddleware } from 'react-relay-network-modern/node8'
+import RelaySSR from 'react-relay-network-modern-ssr/node8/server'
+import { Network, Environment, RecordSource, Store } from 'relay-runtime'
+
+export default {
+  initEnvironment: () => {
+    const source = new RecordSource()
+    const store = new Store(source)
+    const relaySSR = new RelaySSR()
+
+    return {
+      relaySSR,
+      environment: new Environment({
+        store,
+        network: new RelayNetworkLayer([
+          urlMiddleware({
+            url: req => process.env.RELAY_ENDPOINT
+          }),
+          relaySSR.getMiddleware()
+        ])
+      })
+    }
+  },
+  createEnvironment: (relayData, key) => {
+    const source = new RecordSource()
+    const store = new Store(source)
+
+    return new Environment({
+      store,
+      network: Network.create(
+        () => relayData.find(([dataKey]) => dataKey === key)[1]
+      )
+    })
+  }
+}

examples/with-react-relay-network-modern/next.config.js

@@ -0,0 +1,17 @@
+require('dotenv').config()
+
+const path = require('path')
+const Dotenv = require('dotenv-webpack')
+
+module.exports = {
+  webpack: (config, { isServer }) => {
+    config.plugins.push(
+      new Dotenv({
+        path: path.join(__dirname, '.env'),
+        systemvars: true
+      })
+    )
+
+    return config
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "name": "with-react-relay-network-modern",
+  "version": "3.0.3",
+  "description": "Example of Next.js with Relay Modern and react-relay-network-modern",
+  "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "dotenv": "^4.0.0",
+    "dotenv-webpack": "^1.5.4",
+    "graphql": "^0.13.2",
+    "isomorphic-fetch": "2.2.1",
+    "next": "latest",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-relay": "^1.5.0",
+    "react-relay-network-modern": "2.4.0",
+    "react-relay-network-modern-ssr": "1.2.1"
+  },
+  "devDependencies": {
+    "babel-plugin-relay": "^1.4.1",
+    "graphcool": "^1.2.1",
+    "graphql-cli": "^1.0.0-beta.4",
+    "relay-compiler": "^1.5.0"
+  }
+}

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

@@ -0,0 +1,59 @@
+import React from 'react'
+import { QueryRenderer, fetchQuery } from 'react-relay'
+import NextApp, { Container } from 'next/app'
+
+import {
+  initEnvironment,
+  createEnvironment
+} from '../lib/createEnvironment'
+
+export default class App extends NextApp {
+  static getInitialProps = async ({ Component, router, ctx }) => {
+    const { variables } = Component.getInitialProps ? await Component.getInitialProps(ctx) : {}
+
+    try {
+      if (initEnvironment) {
+        const { environment, relaySSR } = initEnvironment()
+
+        await fetchQuery(environment, Component.query, variables)
+
+        return {
+          variables,
+          relayData: await relaySSR.getCache()
+        }
+      }
+    } catch (e) {
+      console.log(e)
+    }
+
+    return {
+      variables
+    }
+  };
+
+  render () {
+    const { Component, variables = {}, relayData } = this.props
+    const environment = createEnvironment(
+      relayData,
+      JSON.stringify({
+        queryID: Component.query ? Component.query().name : undefined,
+        variables
+      })
+    )
+
+    return (
+      <Container>
+        <QueryRenderer
+          environment={environment}
+          query={Component.query}
+          variables={variables}
+          render={({ error, props }) => {
+            if (error) return <div>{error.message}</div>
+            else if (props) return <Component {...props} />
+            return <div>Loading</div>
+          }}
+        />
+      </Container>
+    )
+  }
+}

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

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { graphql } from 'react-relay'
+import BlogPosts from '../components/BlogPosts'
+
+export default class Index extends Component {
+  /**
+   * if you need to use variables
+   *
+   * static getInitialProps = async () => ({
+   *   variables: {
+   *     key: 'value',
+   *   },
+   * });
+   */
+
+  static query = graphql`
+    query pages_indexQuery {
+      viewer {
+        ...BlogPosts_viewer
+      }
+    }
+  `;
+
+  render () {
+    return (
+      <div>
+        <BlogPosts viewer={this.props.viewer} />
+      </div>
+    )
+  }
+}

examples/with-react-relay-network-modern/schema/init-schema.graphql

@@ -0,0 +1,7 @@
+type BlogPost implements Node {
+  content: String!
+  createdAt: DateTime!
+  id: ID! @isUnique
+  title: String!
+  updatedAt: DateTime!
+}