[Example] Fix relay network request (#16525)

* fix(with-react-relay-network-modern): fix README.md typo error

* fix(with-react-relay-network-modern): should not use store cache for create environment

* fix(with-react-relay-network-modern): should not request api again

* feat(with-react-relay-network-modern): add relay-hooks package

* feat(with-react-relay-network-modern): use new RelayEnvironmentProvider

* feat(with-react-relay-network-modern): add useQuery hook

* fix(with-react-relay-network-modern): fix cache error

* fix(with-react-relay-network-modern): fix server loading
Co-authored-by: NLuis Alvarez <luis@vercel.com>
Co-authored-by: Nkodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

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

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

@@ -2,35 +2,35 @@ import {
   RelayNetworkLayer,
   urlMiddleware,
 } from 'react-relay-network-modern/node8'
-import { Environment, RecordSource, Store } from 'relay-runtime'
+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.NEXT_PUBLIC_RELAY_ENDPOINT,
           }),
+          relaySSR.getMiddleware(),
         ]),
       }),
     }
   },
-  createEnvironment: (records) => {
-    const source = new RecordSource(records)
+  createEnvironment: (relayData) => {
+    const source = new RecordSource()
     const store = new Store(source)
 
     return new Environment({
       store,
-      network: new RelayNetworkLayer([
-        urlMiddleware({
-          url: (req) => process.env.NEXT_PUBLIC_RELAY_ENDPOINT,
-        }),
-      ]),
+      network: Network.create(() => relayData?.[0][1] || Promise.resolve()),
     })
   },
 }

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

@@ -18,7 +18,8 @@
     "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"
+    "react-relay-network-modern-ssr": "^1.4.0",
+    "relay-hooks": "3.5.2"
   },
   "devDependencies": {
     "babel-plugin-relay": "^9.0.0",

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

+import { RelayEnvironmentProvider } from 'relay-hooks'
+
 import { createEnvironment } from '../lib/createEnvironment'
 
 export default function App({ Component, pageProps }) {
-  const environment = createEnvironment(pageProps.records)
-  return <Component {...pageProps} environment={environment} />
+  return (
+    <RelayEnvironmentProvider
+      environment={createEnvironment(pageProps.relayData)}
+    >
+      <Component {...pageProps} />
+    </RelayEnvironmentProvider>
+  )
 }

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

-import { graphql, QueryRenderer, fetchQuery } from 'react-relay'
+import { graphql, fetchQuery } from 'react-relay'
+import { useQuery } from 'relay-hooks'
+
 import { initEnvironment } from '../lib/createEnvironment'
 import BlogPosts from '../components/BlogPosts'
 
@@ -10,27 +12,28 @@ const query = graphql`
   }
 `
 
-const Index = ({ environment }) => (
-  <QueryRenderer
-    fetchPolicy="store-and-network"
-    environment={environment}
-    query={query}
-    render={({ error, props }) => {
-      if (error) return <div>{error.message}</div>
-      else if (props) return <BlogPosts viewer={props.viewer} />
-      return <div>Loading</div>
-    }}
-  />
-)
+const Index = ({ environment }) => {
+  const { error, props } = useQuery(query)
+
+  if (error) return <div>{error.message}</div>
+
+  if (!props) return <div>Loading</div>
+
+  return <BlogPosts viewer={props.viewer} />
+}
 
 export async function getStaticProps() {
-  const { environment } = initEnvironment()
+  const { environment, relaySSR } = initEnvironment()
 
   await fetchQuery(environment, query)
 
-  const records = environment.getStore().getSource().toJSON()
+  const relayData = (await relaySSR.getCache())?.[0]
 
-  return { props: { records } }
+  return {
+    props: {
+      relayData: !relayData ? null : [[relayData[0], relayData[1].json]],
+    },
+  }
 }
 
 export default Index