Merge branch 'repro-no-ssr'

Author: lorensr

gatsby-config.js

@@ -228,6 +228,12 @@ const shareImageConfig = {
 }
 
 module.exports = {
+  flags: {
+    PRESERVE_WEBPACK_CACHE: true, // https://github.com/gatsbyjs/gatsby/discussions/28331
+    FAST_DEV: true,
+    DEV_SSR: true,
+    PRESERVE_FILE_DOWNLOAD_CACHE: true,
+  },
   plugins: [
     {
       resolve: 'gatsby-theme-guide',

gatsby-ssr.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { URL } from 'url'
+
+function getLinkProps({ crossOrigin, pathname }) {
+  switch (typeof crossOrigin) {
+    case `string`:
+      return { crossOrigin }
+    case `function`:
+      return getLinkProps({ crossOrigin: crossOrigin(pathname), pathname })
+    default:
+      return { crossOrigin: `anonymous` }
+  }
+}
+
+export const onRenderBody = (
+  { setHeadComponents, pathname = `/` },
+  { crossOrigin = `anonymous` } = {}
+) => {
+  const props = getLinkProps({ crossOrigin, pathname })
+
+  const assets = [
+    'https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevT.ttf',
+    'https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf',
+    'https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf',
+  ]
+  console.log('ON RENDER BODY')
+
+  setHeadComponents(
+    assets.map((href) => {
+      let assetProps
+
+      // External urls should get the props from the plugin configuration.
+      // Local urls will be forced with `crossOrigin: "anonymous"`
+      try {
+        // check if URL is external, if not this constructor throws.
+        new URL(href)
+        assetProps = props
+      } catch (e) {
+        assetProps = { crossOrigin: `anonymous` }
+      }
+
+      return (
+        <link key={href} as="font" href={href} rel="preload" {...assetProps} />
+      )
+    })
+  )
+}

package.json

@@ -66,6 +66,7 @@
     "revalidate": "^1.2.0",
     "scroll-into-view-if-needed": "^2.2.26",
     "subscriptions-transport-ws": "^0.9.18",
+    "url": "^0.11.0",
     "use-query-params": "^1.2.0"
   },
   "devDependencies": {

src/components/landing/Welcome.js

@@ -4,6 +4,7 @@ import { Typography } from '@material-ui/core'
 import { Link } from 'gatsby'
 import queryString from 'query-string'
 import { gql, useMutation } from '@apollo/client'
+import { pick } from 'lodash'
 
 import './Welcome.css'
 import { getPackage } from '../../lib/packages'
@@ -50,19 +51,21 @@ export default function Welcome({ location }) {
 
   const [associateSignupToken, { error }] = useMutation(ASSOCIATE_SIGNUP_TOKEN)
 
+  const userDep = pick(user, ['id', 'hasPurchased'])
+
   const query = queryString.parse(location.search)
   const inviteCode = query['invite-code']
   useEffect(() => {
-    if (user && !user.hasPurchased && inviteCode) {
+    if (userDep.id && !userDep.hasPurchased && inviteCode) {
       associateSignupToken({ variables: { token: inviteCode } })
     }
-  }, [user?.id, inviteCode, associateSignupToken])
+  }, [userDep, inviteCode, associateSignupToken])
 
   useEffect(() => {
-    if (user && !user.hasPurchased && !inviteCode) {
+    if (userDep.id && !userDep.hasPurchased && !inviteCode) {
       pollAssociateSession()
     }
-  }, [user?.id, inviteCode])
+  }, [userDep, inviteCode])
 
   useEffect(() => {
     if (!inviteCode) {

src/gatsby-theme-guide/components/paywall.js

@@ -26,7 +26,7 @@ const FULL_PATHS = ['/service-integrations/', '/preventing-dos-attacks/']
 
 const Hide = styled.div`
   height: ${(props) => (props.hide ? '1px' : 'auto')};
-  overflow-y: hidden;
+  overflow-y: ${(props) => (props.hide ? 'hidden' : 'auto')};
 `
 
 const Overlay = styled.div`

text/preventing-dos-attacks/index.md

@@ -15,7 +15,7 @@ First, guarding against expensive requests—requests that take up significant r
 - Limit depth: One way to make a query expensive is to make it really deep—continuing to select connection fields (like `query { posts { comments { users { posts { comments { ...etc. }}}}}}`). We can use the [`graphql-depth-limit`](https://github.com/stems/graphql-depth-limit) library for this.
 - Limit complexity: This is a more advanced technique than just limiting depth and involves assigning a complexity cost value to each field and limiting the total cost of a query. We can implement this using [`graphql-validation-complexity`](https://github.com/4Catalyzer/graphql-validation-complexity), or, if we want more flexibility, [`graphql-cost-analysis`](https://github.com/pa-bru/graphql-cost-analysis), which allows us to multiply costs by arguments or parent multipliers.
 
-We can guard against a large number of requests by rate limiting. GitHub uses a combination of [rate limiting and cost analysis](https://developer.github.com/v4/guides/resource-limitations/#rate-limit) for its public API—we can’t make queries with a total cost of more than 5,000 points per hour. There’s not yet an open-source library that does this. (If you write one, let us know so that we can link to it! And you may want to use a [leaky bucket algorithm](https://en.wikipedia.org/wiki/Leaky_bucket) like [Shopify does](https://shopify.dev/concepts/about-apis/rate-limits) instead of a fixed window.) The [`graphql-rate-limit-directive`](https://github.com/ravangen/graphql-rate-limit) library provides a directive that allows us to limit the number of times a particular field or object is selected within a certain time window.
+We can guard against a large number of requests by rate limiting. GitHub uses a combination of [rate limiting and cost analysis](https://developer.github.com/v4/guides/resource-limitations/#rate-limit) for its public API—we can’t make queries with a total cost of more than 5,000 points per hour. There’s not yet an open-source library that does this. (If you write one, let us know so that we can link to it! And you may want to use a [leaky bucket algorithm](https://en.wikipedia.org/wiki/Leaky_bucket) like [Shopify does](https://shopify.dev/concepts/about-apis/rate-limits) with its [cost analysis rate limiting](https://shopify.engineering/rate-limiting-graphql-apis-calculating-query-complexity) instead of a fixed window.) The [`graphql-rate-limit-directive`](https://github.com/ravangen/graphql-rate-limit) library provides a directive that allows us to limit the number of times a particular field or object is selected within a certain time window.
 
 In addition to blocking requests that are too complex or too frequent, we can reduce the amount of resources each request takes. For instance, instead of doing all the work needed during the request, in some cases we can send a response and then queue a job to be executed by a different server, clearing more room for our API server to handle more requests. Another example is caching—we can reduce the load on our database by using a cache, which we talk about in [Chapter 11: Server > Performance > Caching](../server/extended-topics/performance.md#caching).