cleanup

jgeschwendt · Nov 12, 2018 · 9bd8e33 · 9bd8e33
1 parent 735129b
commit 9bd8e33
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 70 deletions.
diff --git a/serverless.yml b/serverless.yml
@@ -1,4 +1,4 @@
-service: serverless-react
+service: serverless-react-ssr
 
 frameworkVersion: '>=1.9.0 <2.0.0'
 
@@ -89,6 +89,17 @@ resources:
         S3WebsiteEndpoint: s3-website-us-west-2.amazonaws.com
 
   Resources:
+    ApiGatewayMethodProxyVarGet:
+      Properties:
+        Integration:
+          CacheKeyParameters:
+            - method.request.path.proxy
+          CacheNamespace: ApiGatewayMethodProxyVarGetCacheNS
+          RequestParameters:
+            integration.request.path.proxy: method.request.path.proxy
+        RequestParameters:
+          method.request.path.proxy: true
+
     ApiGatewayBasePathMapping:
       DependsOn: ApiGatewayDomainName
       Type: AWS::ApiGateway::BasePathMapping
@@ -166,6 +177,9 @@ resources:
         AuthorizationType: NONE
         HttpMethod: GET
         Integration:
+          CacheKeyParameters:
+            - method.request.path.proxy
+          CacheNamespace: ApiGatewayMethodStaticProxyVarGetCacheNS
           Credentials: {'Fn::Join': ['', ['arn:aws:iam::', {Ref: AWS::AccountId}, ':role/', {Ref: ApiGatewayIamRoleExecution}]]}
           IntegrationHttpMethod: GET
           IntegrationResponses:

diff --git a/src/platforms/browser/apollo.ts b/src/platforms/browser/apollo.ts
@@ -8,7 +8,7 @@ export default class extends ApolloClient<any> {
     super({
       cache: new InMemoryCache({
         fragmentMatcher: new IntrospectionFragmentMatcher({
-          introspectionQueryResultData: window.__APOLLO_FRAGS__
+          introspectionQueryResultData: window.__APOLLO_SCHEMA__
         })
       }).restore(window.__APOLLO_STATE__),
       link: new HttpLink({ fetch, uri }),

diff --git a/src/platforms/browser/components/App.tsx b/src/platforms/browser/components/App.tsx
@@ -5,11 +5,11 @@ import { renderRoutes } from 'react-router-config'
 import { BrowserRouter } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
 
-export default ({ client, context, location, routes, store, theme }) => (
+export default ({ client, location, routes, store, theme }) => (
   <Provider store={store}>
     <ApolloProvider client={client}>
         <ThemeProvider theme={theme}>
-          <BrowserRouter location={location} context={context}>
+          <BrowserRouter location={location}>
             {renderRoutes(routes)}
           </BrowserRouter>
         </ThemeProvider>

diff --git a/src/platforms/browser/hydrate.ts b/src/platforms/browser/hydrate.ts
@@ -13,11 +13,10 @@ import App from './components/App'
 
 const store = createStore(reducer , window.__REDUX_STATE__, (window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] || compose)())
 
-export default (element, context = {}) => {
+export default (element) => {
   loadableReady(() => {
     hydrate(createElement(App, {
       client: new ApolloClient({ uri: `https:${process.env.API_DOMAIN_NAME}` }),
-      context,
       location: window.location.pathname || '/',
       routes,
       store,

diff --git a/src/platforms/browser/main.ts b/src/platforms/browser/main.ts
@@ -1,3 +1,3 @@
 import { default as Hydrate } from './hydrate'
 
-Hydrate(document.getElementById('root'), window.__LAMBDA_STATE__)
+Hydrate(document.getElementById('root'))
diff --git a/src/platforms/lambda/components/App.tsx b/src/platforms/lambda/components/App.tsx
@@ -8,7 +8,6 @@ import { StyleSheetManager, ThemeProvider } from 'styled-components'
 
 export default ({
   client,
-  context,
   extractor,
   location,
   routes,
@@ -22,7 +21,7 @@ export default ({
         <ApolloProvider client={client}>
           <StyleSheetManager sheet={sheet}>
             <ThemeProvider theme={theme}>
-              <StaticRouter location={location} context={context}>
+              <StaticRouter location={location}>
                 {renderRoutes(routes)}
               </StaticRouter>
             </ThemeProvider>

diff --git a/src/platforms/lambda/document.ts b/src/platforms/lambda/document.ts
@@ -1,6 +1,5 @@
 export default ({
   content,
-  context,
   extractor,
   helmet,
   introspectionQueryResultData,
@@ -21,10 +20,9 @@ export default ({
 <body ${helmet.bodyAttributes.toString()}>
   <div id="root">${content}</div>
   <script>${`
+    window.__APOLLO_SCHEMA__=${JSON.stringify(introspectionQueryResultData).replace(/</g, '\\u003c')};
     window.__APOLLO_STATE__=${JSON.stringify(state).replace(/</g, '\\u003c')};
-    window.__APOLLO_FRAGS__=${JSON.stringify(introspectionQueryResultData).replace(/</g, '\\u003c')};
-    window.__LAMBDA_STATE__=${JSON.stringify(context).replace(/</g, '\\u003c')};
-    window.__REDUX_STATE__=${JSON.stringify(store.getState()).replace(/</g, '\\u003c')};
+    window.__REDUX_STORE__=${JSON.stringify(store.getState()).replace(/</g, '\\u003c')};
   `}</script>
   ${extractor.getScriptTags()}
   <script src="/static/vendors.js"></script>

diff --git a/src/platforms/lambda/fragment-matcher.ts b/src/platforms/lambda/fragment-matcher.ts
@@ -22,9 +22,12 @@ export default ({ uri }) => fetch(uri, {
 })
 .then(result => result.json())
 .then(result => {
-  // here we're filtering out any type information unrelated to unions or interfaces
-  result.data.__schema.types = result.data.__schema.types.filter(
-    type => type.possibleTypes !== null
-  )
-  return result.data
+  if (result && result.data && result.data.__schema && result.data.__schema.types) {
+    // here we're filtering out any type information unrelated to unions or interfaces
+    result.data.__schema.types = result.data.__schema.types.filter(
+      type => type.possibleTypes !== null
+    )
+    return result.data
+  }
+  return null
 })
diff --git a/src/platforms/lambda/middleware/robots.ts b/src/platforms/lambda/middleware/robots.ts
@@ -0,0 +1,11 @@
+export default async (event, context, callback) => {
+  callback(null, {
+    body: process.env.STAGE === 'prod'
+    ? 'User-agent: *\nDisallow:\nSitemap: https://' + process.env.APP_DOMAIN_NAME + '/sitemap.xml\n'
+    : 'User-agent: *\nDisallow: /\n',
+    headers: {
+      'Access-Control-Allow-Origin': '*'
+    },
+    statusCode: 200
+  })
+}
diff --git a/src/platforms/lambda/middleware/sitemap.ts b/src/platforms/lambda/middleware/sitemap.ts
@@ -0,0 +1,30 @@
+import * as sitemap from 'sitemap'
+
+const sitemapDocument = async () => new Promise((resolve, reject) => {
+  const mapping = sitemap.createSitemap({
+    cacheTime: 600000,
+    hostname: process.env.API_DOMAIN_NAME,
+    urls: [
+      { url: '/' }
+    ]
+  })
+
+  mapping.toXML((error, xml) => {
+    if (error) {
+      reject(error)
+    } else {
+      resolve(xml)
+    }
+  })
+})
+
+export default async (event, context, callback) => {
+  callback(null, {
+    statusCode: 200,
+    headers: {
+      'Content-Type': 'application/xml',
+      'Access-Control-Allow-Origin': '*'
+    },
+    body: await sitemapDocument()
+  })
+}
diff --git a/src/platforms/lambda/render.ts b/src/platforms/lambda/render.ts
@@ -15,18 +15,20 @@ import reducer from '../../app/reducer'
 import routes from '../../app/routes'
 import theme from '../../app/theme'
 
-export default async ({ context, location }) => {
+export default async ({ location }) => {
   const { client, introspectionQueryResultData } = await LambdaContainerCache
+  const statsFile = process.env.IS_OFFLINE
+    ? resolve('.webpack/service/loadable-stats.json')
+    : resolve('loadable-stats.json')
   const store = createStore(reducer)
-
   await client.resetStore() // the cache persists between lambda requests
-  const extractor = new ChunkExtractor({ entrypoints: [], statsFile: resolve('.webpack/service/loadable-stats.json') })
+
+  const extractor = new ChunkExtractor({ entrypoints: [], statsFile })
   const sheet = new ServerStyleSheet()
 
   const content = await renderToStringWithData(
     createElement(App, {
       client,
-      context,
       extractor,
       location,
       routes,
@@ -41,7 +43,6 @@ export default async ({ context, location }) => {
 
   return HTML({
     content,
-    context,
     extractor,
     introspectionQueryResultData,
     helmet,

diff --git a/src/platforms/lambda/server.ts b/src/platforms/lambda/server.ts
@@ -1,33 +1,13 @@
 import render from './render'
-import sitemap from './sitemap'
+import robots from './middleware/robots'
+import sitemap from './middleware/sitemap'
 
 const server = async (event, context, callback) => {
   switch (event.path) {
-    case '/sitemap.xml':
-      callback(null, {
-        statusCode: 200,
-        headers: {
-          'Content-Type': 'application/xml',
-          'Access-Control-Allow-Origin': '*'
-        },
-        body: await sitemap({ uri: process.env.API_DOMAIN_NAME })
-      })
-      return
-
-    case '/robots.txt':
-      callback(null, {
-        body: process.env.STAGE === 'prod'
-        ? 'User-agent: *\nDisallow:\nSitemap: https://' + process.env.APP_DOMAIN_NAME + '/sitemap.xml\n'
-        : 'User-agent: *\nDisallow: /\n',
-        headers: {
-          'Access-Control-Allow-Origin': '*'
-        },
-        statusCode: 200
-      })
-      return
-
+    case '/sitemap.xml': await sitemap(event, context, callback); return
+    case '/robots.txt': await robots(event, context, callback); return
     default:
-      const html = await render({ context, location: event.path })
+      const html = await render({ location: event.path })
       const body = `<!DOCTYPE html>${html}`
 
       callback(null, {

diff --git a/src/platforms/lambda/sitemap.ts b/src/platforms/lambda/sitemap.ts
diff --git a/typings/typings.d.ts b/typings/typings.d.ts
@@ -14,8 +14,7 @@ declare module '*.json' {
 }
 
 interface Window {
-  __APOLLO_FRAGS__: any
+  __APOLLO_SCHEMA__: any
   __APOLLO_STATE__: any
-  __LAMBDA_STATE__: any
   __REDUX_STATE__: any
 }