Add Apollo

lorensr · lorensr · commit a10b80c4e897 · 2021-02-08T01:57:47.000-05:00
diff --git a/server/api/server.js b/server/api/server.js
@@ -1,27 +1,62 @@
 import React from 'react'
 import{renderToString } from 'react-dom/server'
+import{
+ ApolloClient,
+ createHttpLink,
+ InMemoryCache,
+ ApolloProvider,
+} from '@apollo/client'
+import fetch from 'cross-fetch'
+import{getDataFromTree } from '@apollo/client/react/ssr'
+
+import ReviewList from '../src/components/ReviewList'
+
+const apollo = new ApolloClient({
+ link: createHttpLink({
+ uri: 'https://api.graphql.guide/graphql',
+ fetch,
+ }),
+ ssrMode: true,
+ cache: new InMemoryCache(),
+})
 
 // import App from '../src/components/App'
 // ^ this would result in errors, so we make a small example App:
-const App = () => <b>My server-rendered React app</b>
+const App = () => (
+ <ApolloProvider client={apollo}>
+ <h1>Reviews:</h1>
+ <ReviewList orderBy="createdAt_DESC" />
+ </ApolloProvider>
+)
 
 export default (req, res) =>{
- res.status(200).send(`
- <!doctype html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <title>The GraphQL Guide</title>
- </head>
-
- <body>
- <div id="root">
- ${renderToString(<App />)}
- </div>
- </body>
-
- </html>
-`)
+ getDataFromTree(<App />).then((content) =>{
+ const appHtml = renderToString(
+ <div id="root" dangerouslySetInnerHTML={{__html: content }} />
+ )
+ const initialState = apollo.extract()
+
+ res.status(200).send(`
+ <!doctype html>
+ <html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <title>The GraphQL Guide</title>
+ </head>
+
+ <body>
+ ${appHtml}
+ <script>
+ window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(
+ /</g,
+ '\\u003c'
+ )}
+ </script>
+ </body>
+
+ </html>
+ `)
+ })
 }

-Original file line number
+Diff line change
@@ @@ -1,27 +1,62 @@ @@
 importReactfrom'react'
 import{renderToString}from'react-dom/server'
 +import{
 +ApolloClient,
 +createHttpLink,
 +InMemoryCache,
 +ApolloProvider,
 +}from'@apollo/client'
 +importfetchfrom'cross-fetch'
 +import{getDataFromTree}from'@apollo/client/react/ssr'
++
 +importReviewListfrom'../src/components/ReviewList'
++
 +constapollo=newApolloClient({
 +link: createHttpLink({
 +uri: 'https://api.graphql.guide/graphql',
 + fetch,
 +}),
 +ssrMode: true,
 +cache: newInMemoryCache(),
 +})
 // import App from '../src/components/App'
 // ^ this would result in errors, so we make a small example App:
 -constApp=()=><b>My server-rendered React app</b>
 +constApp=()=>(
 +<ApolloProviderclient={apollo}>
 +<h1>Reviews:</h1>
 +<ReviewListorderBy="createdAt_DESC"/>
 +</ApolloProvider>
 +)
 exportdefault(req,res)=>{
 -res.status(200).send(`
 - <!doctype html>
 - <html lang="en">
+-
 - <head>
 - <meta charset="utf-8">
 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 - <title>The GraphQL Guide</title>
 - </head>
+-
 - <body>
 - <div id="root">
 -${renderToString(<App/>)}
 - </div>
 - </body>
+-
 - </html>
 -`)
 +getDataFromTree(<App/>).then((content)=>{
 +constappHtml=renderToString(
 +<divid="root"dangerouslySetInnerHTML={{__html: content}}/>
 +)
 +constinitialState=apollo.extract()
++
 +res.status(200).send(`
 + <!doctype html>
 + <html lang="en">
++
 + <head>
 + <meta charset="utf-8">
 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 + <title>The GraphQL Guide</title>
 + </head>
++
 + <body>
 +${appHtml}
 + <script>
 + window.__APOLLO_STATE__=${JSON.stringify(initialState).replace(
 +/</g,
 +'\\u003c'
 +)}
 + </script>
 + </body>
++
 + </html>
 + `)
 +})
+}