feat: enable head component and native typegen

Author: wardpeet

.gitignore

@@ -73,4 +73,4 @@ yarn-error.log
 *.swp
 
 # Codegen stuff
-src/__generated__/
+src/gatsby-types.d.ts

.prettierrc

@@ -1,4 +1,5 @@
 {
   "arrowParens": "avoid",
-  "semi": false
-}
+  "semi": false,
+  "singleQuote": false
+}

gatsby-config.js

@@ -5,10 +5,9 @@ module.exports = {
       "A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.",
     siteUrl: "http://graphql.org/",
   },
-
+  graphqlTypegen: true,
   plugins: [
-    "gatsby-plugin-react-helmet",
-    'gatsby-plugin-anchor-links',
+    "gatsby-plugin-anchor-links",
     {
       resolve: "gatsby-source-filesystem",
       options: {
@@ -23,11 +22,11 @@ module.exports = {
           {
             resolve: "@weknow/gatsby-remark-twitter",
             options: {
-              debug: true
-            }
-          }
-        ]
-      }
+              debug: true,
+            },
+          },
+        ],
+      },
     },
     {
       resolve: `gatsby-plugin-webfonts`,
@@ -51,7 +50,6 @@ module.exports = {
       },
     },
     `gatsby-plugin-less`,
-    `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
@@ -115,11 +113,5 @@ module.exports = {
         ],
       },
     },
-    {
-      resolve: "gatsby-plugin-typegen",
-      options: {
-        outputPath: "src/__generated__/gatsby-types.d.ts",
-      },
-    },
   ],
 }

package.json

@@ -21,12 +21,11 @@
     "assert": "2.0.0",
     "codemirror": "5.65.1",
     "codemirror-graphql": "1.2.11",
-    "gatsby": "4.7.2",
+    "gatsby": "4.24.8",
     "gatsby-plugin-anchor-links": "1.2.1",
     "gatsby-plugin-feed": "4.7.0",
     "gatsby-plugin-google-analytics": "4.7.0",
     "gatsby-plugin-less": "6.7.0",
-    "gatsby-plugin-react-helmet": "5.7.0",
     "gatsby-plugin-typegen": "2.2.4",
     "gatsby-plugin-webfonts": "2.2.1",
     "gatsby-source-filesystem": "4.7.0",
@@ -40,13 +39,11 @@
     "prismjs": "1.25.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-helmet": "6.1.0",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
     "@types/codemirror": "5.60.5",
     "@types/prismjs": "1.16.6",
-    "@types/react-helmet": "6.1.4",
     "prettier": "2.4.1"
   }
-}
+}

src/components/BlogLayout/index.tsx

@@ -7,15 +7,13 @@ export const fragments = graphql`
   fragment BlogLayout_post on BlogPost {
     ...BlogPost_post
   }
-`;
+`
 
 interface Props {
-  post: GatsbyTypes.BlogLayout_postFragment,
+  post: Queries.BlogLayout_postFragment
 }
 
-const BlogLayout: React.FC<Props> = ({
-  post,
-}) => {
+const BlogLayout: React.FC<Props> = ({ post }) => {
   return (
     <section>
       <div className="documentationContent">

src/components/BlogPost/index.tsx

@@ -13,16 +13,14 @@ export const fragments = graphql`
       rawMarkdownBody
     }
   }
-`;
+`
 
 interface Props {
-  post: GatsbyTypes.BlogPost_postFragment,
+  post: Queries.BlogPost_postFragment
 }
 
-const BlogPost: React.FC<Props> = ({
-  post,
-}) => {
-  const byline = post.authors.join(', ')
+const BlogPost: React.FC<Props> = ({ post }) => {
+  const byline = post.authors.join(", ")
   return (
     <div className="inner-content">
       <h1>{post.title}</h1>

src/components/BlogPostPreview/index.tsx

@@ -12,22 +12,20 @@ export const fragments = graphql`
       excerpt
     }
   }
-`;
+`
 
 interface Props {
-  post: GatsbyTypes.BlogPostPreview_postFragment,
+  post: Queries.BlogPostPreview_postFragment
 }
 
-const BlogPostPreview: React.FC<Props> = ({
-  post,
-}) => (
+const BlogPostPreview: React.FC<Props> = ({ post }) => (
   <div className="inner-content">
     <h1>
       <Link to={post.postPath!}>{post.title}</Link>
     </h1>
 
     <p>
-      {new Date(post.date).toLocaleDateString()} by {post.authors.join(', ')}
+      {new Date(post.date).toLocaleDateString()} by {post.authors.join(", ")}
     </p>
 
     <div className="tag-wrapper">

src/components/BlogSidebar/index.tsx

@@ -3,15 +3,15 @@ import { Link, useStaticQuery, graphql } from "gatsby"
 import { useLocation } from "@reach/router"
 
 const BlogSidebar: React.FC = () => {
-  const data = useStaticQuery<GatsbyTypes.AllTagsStaticQuery>(graphql`
+  const data = useStaticQuery<Queries.AllTagsStaticQuery>(graphql`
     query AllTagsStatic {
       allBlogPost {
         group(field: tags) {
           fieldValue
         }
       }
       allRecentBlogPost: allBlogPost(
-        limit: 30,
+        limit: 30
         sort: { fields: [date], order: DESC }
       ) {
         nodes {
@@ -26,7 +26,7 @@ const BlogSidebar: React.FC = () => {
   const tags = data.allBlogPost.group.map(group => group.fieldValue!)
   const recentPosts = data.allRecentBlogPost.nodes
 
-  const { pathname: currentPath } = useLocation();
+  const { pathname: currentPath } = useLocation()
 
   return (
     <div className="nav-docs blog-sidebar">
@@ -41,7 +41,7 @@ const BlogSidebar: React.FC = () => {
         <ul>
           {tags.map(tag => {
             const formattedTag = tag[0].toUpperCase() + tag.substring(1)
-            const pathname = `/tags/${tag}/`;
+            const pathname = `/tags/${tag}/`
             return (
               <li key={tag}>
                 {pathname === currentPath ? (

src/components/Layout/index.tsx

@@ -1,30 +1,20 @@
 import React from "react"
 import Footer from "../Footer"
 import Header from "../Header"
-import Seo from "../Seo"
 
 import "../../assets/css/style.less"
 
-interface PageContext {
-  sourcePath?: string
-}
-
 interface Props {
   children: React.ReactNode
-  title?: string
-  description?: string
   className?: string
-  pageContext: PageContext
+  pageContext?: { sourcePath?: string }
 }
 const IndexLayout = ({
-  title,
-  description,
   children,
   className,
-  pageContext: { sourcePath },
+  pageContext: { sourcePath } = {},
 }: Props): JSX.Element => (
   <>
-    <Seo title={title} description={description} />
     <div className={className}>
       <Header />
       {children}

src/components/Seo/index.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import Helmet from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 
 interface Props {
@@ -8,7 +7,7 @@ interface Props {
 }
 
 const Seo = ({ title, description }: Props): JSX.Element => {
-  const data = useStaticQuery<GatsbyTypes.SeoQueryQuery>(graphql`
+  const data = useStaticQuery<Queries.SeoQueryQuery>(graphql`
     query SeoQuery {
       site {
         siteMetadata {
@@ -19,16 +18,16 @@ const Seo = ({ title, description }: Props): JSX.Element => {
     }
   `)
 
-  const metadata = data.site.siteMetadata
+  const metadata = data.site!.siteMetadata
 
   return (
-    <Helmet>
-      <title>{title ?? metadata.title}</title>
-      <meta name="description" content={description ?? metadata.description} />
+    <>
+      <title>{title ?? metadata!.title}</title>
+      <meta name="description" content={description ?? metadata!.description} />
       <meta property="og:image" content="/img/og-image.png" />
       <meta property="twitter:site" content="@graphql" />
       <meta name="viewport" content="width=640" />
-    </Helmet>
+    </>
   )
 }