feat: enable head component and native typegen (graphql#1292)

* feat: enable head component and native typegen

* remove forgotten title

Author: wardpeet

.prettierrc

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

gatsby-config.js

@@ -5,10 +5,11 @@ 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: {
+    typesOutputPath: `src/__generated__/gatsby-types.d.ts`,
+  },
   plugins: [
-    "gatsby-plugin-react-helmet",
-    'gatsby-plugin-anchor-links',
+    "gatsby-plugin-anchor-links",
     {
       resolve: "gatsby-source-filesystem",
       options: {
@@ -23,11 +24,11 @@ module.exports = {
           {
             resolve: "@weknow/gatsby-remark-twitter",
             options: {
-              debug: true
-            }
-          }
-        ]
-      }
+              debug: true,
+            },
+          },
+        ],
+      },
     },
     {
       resolve: `gatsby-plugin-webfonts`,
@@ -51,7 +52,6 @@ module.exports = {
       },
     },
     `gatsby-plugin-less`,
-    `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
@@ -115,11 +115,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>
+    </>
   )
 }
 

src/pages/blog.tsx

@@ -4,12 +4,11 @@ import type { PageProps } from "gatsby"
 import Layout from "../components/Layout"
 import BlogPostPreview from "../components/BlogPostPreview"
 import BlogSidebar from "../components/BlogSidebar"
+import Seo from "../components/Seo"
 
 export const query = graphql`
   query BlogPostListPage {
-    allBlogPost(
-      sort: { fields: [date], order: DESC }
-    ) {
+    allBlogPost(sort: { fields: [date], order: DESC }) {
       nodes {
         id
         ...BlogPostPreview_post
@@ -18,19 +17,16 @@ export const query = graphql`
   }
 `
 
-type Props = PageProps<GatsbyTypes.BlogPostListPageQuery, GatsbyTypes.SitePageContext>
+type Props = PageProps<Queries.BlogPostListPageQuery>
 
 const BlogPostListPage: React.FC<Props> = ({ data }) => {
   return (
-    <Layout title="Blog | GraphQL" pageContext={{}}>
+    <Layout>
       <section>
         <div className="documentationContent">
           <div>
             {data.allBlogPost.nodes.map(post => (
-              <BlogPostPreview
-                key={post.id}
-                post={post}
-              />
+              <BlogPostPreview key={post.id} post={post} />
             ))}
           </div>
           <BlogSidebar />
@@ -40,4 +36,8 @@ const BlogPostListPage: React.FC<Props> = ({ data }) => {
   )
 }
 
+export function Head() {
+  return <Seo title="Blog | GraphQL" />
+}
+
 export default BlogPostListPage

src/pages/blog/{BlogPost.postId}.tsx

@@ -1,8 +1,9 @@
 import * as React from "react"
-import type { PageProps } from "gatsby"
+import type { PageProps, HeadProps } from "gatsby"
 import { graphql } from "gatsby"
 import Layout from "../../components/Layout"
 import BlogLayout from "../../components/BlogLayout"
+import Seo from "../../components/Seo"
 
 export const query = graphql`
   query BlogPostPage($id: String!) {
@@ -13,19 +14,21 @@ export const query = graphql`
   }
 `
 
-type Props = PageProps<GatsbyTypes.BlogPostPageQuery, GatsbyTypes.SitePageContext>
+type Props = PageProps<Queries.BlogPostPageQuery>
 
-const BlogPostPage: React.FC<Props> = ({
-  data
-}) => {
+const BlogPostPage: React.FC<Props> = ({ data }) => {
   // Always exist since it is collected by Gatsby filesystem route API
   const post = data.blogPost!
 
   return (
-    <Layout title={`${post.title} | GraphQL`} pageContext={{}}>
+    <Layout>
       <BlogLayout post={post} />
     </Layout>
   )
 }
 
+export function Head({ data }: HeadProps<Queries.BlogPostPageQuery>) {
+  return <Seo title={`${data.blogPost!.title} | GraphQL`} />
+}
+
 export default BlogPostPage

src/pages/brand.tsx

@@ -1,14 +1,11 @@
 import React, { useState } from "react"
 import type { PageProps } from "gatsby"
 import Layout from "../components/Layout"
+import Seo from "../components/Seo"
 
-export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>) => {
+export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
   return (
-    <Layout
-      title="GraphQL logo, brand guidelines and assets"
-      pageContext={pageContext}
-      className="brand"
-    >
+    <Layout pageContext={pageContext} className="brand">
       <section>
         <h1>GraphQL Logo &amp; Brand Guidelines</h1>
         <div className="agree-actions-container top">
@@ -24,8 +21,11 @@ export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>)
             GraphQL Foundation
           </a>
           . Use of the trademark and logo are subject to the{" "}
-          <a href="https://lfprojects.org/policies/trademark-policy/"
-            target="_blank">LF Projects trademark policy
+          <a
+            href="https://lfprojects.org/policies/trademark-policy/"
+            target="_blank"
+          >
+            LF Projects trademark policy
           </a>
           .
         </p>
@@ -418,6 +418,10 @@ export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>)
   )
 }
 
+export function Head() {
+  return <Seo title="GraphQL logo, brand guidelines and assets" />
+}
+
 function AgreeActions() {
   const [agree, setAgree] = useState(false)
   return (