fix(gatsby-pugin-typography): headerComponents is now tolerant to null values (#12551)

## Description

As of right now null values may occur in `headerComponents`. This commit makes the typography plugin tolerant to these occurrences with simple null check.

## Related Issues

Fixes #12549

Author: danielkov

packages/gatsby-plugin-typography/src/__tests__/gatsby-ssr.js

@@ -100,4 +100,24 @@ describe(`onPreRenderHTML`, () => {
 
     expect(spies.replaceHeadComponents).toHaveBeenCalledWith(components)
   })
+
+  it(`does not fail when head components include null`, () => {
+    const components = [
+      {
+        key: `link-1234`,
+      },
+      {
+        key: `link-preload`,
+      },
+      {
+        key: `_____01234_____`,
+      },
+      null,
+    ]
+
+    const spies = setup(clone(components))
+
+    expect(spies.replaceHeadComponents).toHaveBeenCalledWith(components)
+    expect(spies.replaceHeadComponents).toHaveReturned()
+  })
 })

packages/gatsby-plugin-typography/src/gatsby-ssr.js

@@ -24,9 +24,9 @@ exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
 exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
   const headComponents = getHeadComponents()
   headComponents.sort((x, y) => {
-    if (x.key === `TypographyStyle`) {
+    if (x && x.key === `TypographyStyle`) {
       return -1
-    } else if (y.key === `TypographyStyle`) {
+    } else if (y && y.key === `TypographyStyle`) {
       return 1
     }
     return 0