Update relay modern example

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

@@ -3,16 +3,18 @@ import {
   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 store, source
 
 let storeEnvironment = null
 
 export default {
-  createEnvironment: relayData => {
+  createEnvironment: records => {
+    if (!store) {
+      source = new RecordSource(records)
+      store = new Store(source)
+    }
     if (storeEnvironment) return storeEnvironment
 
     storeEnvironment = new Environment({
@@ -22,9 +24,6 @@ export default {
           size: 100,
           ttl: 60 * 1000,
         }),
-        new RelaySSR(relayData).getMiddleware({
-          lookup: false,
-        }),
         urlMiddleware({
           url: req => process.env.RELAY_ENDPOINT,
         }),

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

@@ -2,37 +2,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'
+import { 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()
+  createEnvironment: records => {
+    const source = new RecordSource(records)
     const store = new Store(source)
 
     return new Environment({
       store,
-      network: Network.create(
-        () => relayData.find(([dataKey]) => dataKey === key)[1]
-      ),
+      network: new RelayNetworkLayer([
+        urlMiddleware({
+          url: req => process.env.RELAY_ENDPOINT,
+        }),
+      ]),
     })
   },
 }

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

@@ -12,13 +12,18 @@ export default class App extends NextApp {
 
     try {
       if (initEnvironment && Component.query) {
-        const { environment, relaySSR } = initEnvironment()
+        const { environment } = initEnvironment()
 
         await fetchQuery(environment, Component.query, variables)
 
+        const records = environment
+          .getStore()
+          .getSource()
+          .toJSON()
+
         return {
           variables,
-          relayData: await relaySSR.getCache(),
+          records,
         }
       }
     } catch (e) {
@@ -31,17 +36,12 @@ export default class App extends NextApp {
   }
 
   render() {
-    const { Component, variables = {}, relayData } = this.props
-    const environment = createEnvironment(
-      relayData,
-      JSON.stringify({
-        queryID: Component.query ? Component.query.params.name : undefined,
-        variables,
-      })
-    )
+    const { Component, variables = {}, records } = this.props
+    const environment = createEnvironment(records)
 
     return (
       <QueryRenderer
+        fetchPolicy="store-and-network"
         environment={environment}
         query={Component.query}
         variables={variables}