Stricter GraphQL typing using gatsby-plugin-typegen

.gitignore

@@ -71,3 +71,6 @@ yarn-error.log
 
 # Swap files
 *.swp
+
+# Codegen stuff
+src/__generated__/

gatsby-config.js

@@ -115,5 +115,11 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: "gatsby-plugin-typegen",
+      options: {
+        outputPath: "src/__generated__/gatsby-types.d.ts",
+      },
+    },
   ],
 }

package.json

@@ -11,6 +11,9 @@
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
+  "resolutions": {
+    "graphql": "15.6.0"
+  },
   "dependencies": {
     "@graphql-tools/schema": "8.2.0",
     "@weknow/gatsby-remark-twitter": "0.2.3",
@@ -23,6 +26,7 @@
     "gatsby-plugin-google-analytics": "3.14.0",
     "gatsby-plugin-less": "5.14.0",
     "gatsby-plugin-react-helmet": "4.14.0",
+    "gatsby-plugin-typegen": "^2.2.4",
     "gatsby-plugin-webfonts": "2.1.1",
     "gatsby-source-filesystem": "3.14.0",
     "gatsby-transformer-remark": "4.11.0",

src/components/BlogSidebar/index.tsx

@@ -7,7 +7,7 @@ interface Props {
 }
 
 const BlogSidebar = ({ posts, currentPermalink }: Props) => {
-  const allTags = useStaticQuery(graphql`
+  const allTags = useStaticQuery<GatsbyTypes.allTagsQuery>(graphql`
     query allTags {
       allMarkdownRemark {
         group(field: frontmatter___tags) {
@@ -28,7 +28,7 @@ const BlogSidebar = ({ posts, currentPermalink }: Props) => {
       <div className="nav-docs-section categories">
         <h3>Categories</h3>
         <ul>
-          {allTags.map(({ fieldValue }: { fieldValue: string }, i: number) => {
+          {allTags.map(({ fieldValue = '' }, i: number) => {
             const tag = fieldValue[0].toUpperCase() + fieldValue.substring(1)
             return (
               <li key={i}>

src/components/Footer/index.tsx

@@ -13,7 +13,7 @@ interface FooterLinks {
   subsections: LinkItem[]
 }
 
-const getLinks = (sourcePath: string): FooterLinks[] => [
+const getLinks = (sourcePath?: string): FooterLinks[] => [
   {
     text: "Learn",
     href: "/learn/",
@@ -70,18 +70,18 @@ const getLinks = (sourcePath: string): FooterLinks[] => [
       { text: "Logo and Brand Guidelines", href: "/brand" },
       { text: "Code of Conduct", href: "/codeofconduct/" },
       { text: "Contact Us", href: "/foundation/contact/" },
-      {
+      sourcePath && {
         text: "Edit this page",
         href:
           "https://github.com/graphql/graphql.github.io/edit/source/" +
           sourcePath,
         icon: "/img/edit.svg",
       },
-    ],
+    ].filter(Boolean) as LinkItem[],
   },
 ]
 
-const Footer = ({ sourcePath }: { sourcePath: string }) => {
+const Footer = ({ sourcePath }: { sourcePath?: string }) => {
   return (
     <div>
       <footer>

src/components/Layout/index.tsx

@@ -6,7 +6,7 @@ import Seo from "../Seo"
 import "../../assets/css/style.less"
 
 interface PageContext {
-  sourcePath: string
+  sourcePath?: string
 }
 
 interface Props {

src/components/Seo/index.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Seo = ({ title, description }: Props): JSX.Element => {
-  const data = useStaticQuery(graphql`
+  const data = useStaticQuery<GatsbyTypes.SeoQueryQuery>(graphql`
     query SeoQuery {
       site {
         siteMetadata {

src/pages/blog.tsx

@@ -3,13 +3,14 @@ import Layout from "../components/Layout"
 import BlogPost from "../components/BlogPost"
 import BlogSidebar from "../components/BlogSidebar"
 import { graphql } from "gatsby"
+import type { PageProps } from "gatsby";
 
-export default ({ pageContext, data }: any) => {
+export default ({ pageContext, data }: PageProps<GatsbyTypes.GetAllBlogPostsQuery, GatsbyTypes.SitePageContext>) => {
   const posts = data.allMarkdownRemark.edges
-    .map((e: any) => e.node)
-    .sort((a: any, b: any) => {
-      const aDate = new Date(a.frontmatter.date)
-      const bDate = new Date(b.frontmatter.date)
+    .map(e => e.node)
+    .sort((a, b) => {
+      const aDate = new Date(a?.frontmatter?.date ?? 0)
+      const bDate = new Date(b?.frontmatter?.date ?? 0)
       if (aDate > bDate) {
         return -1
       } else if (aDate < bDate) {
@@ -64,7 +65,7 @@ export default ({ pageContext, data }: any) => {
 }
 
 export const query = graphql`
-  query getAllBlogPosts {
+  query GetAllBlogPosts {
     allMarkdownRemark(
       filter: { frontmatter: { permalink: { regex: "/blog/" } } }
     ) {

src/pages/brand.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from "react"
+import type { PageProps } from "gatsby"
 import Layout from "../components/Layout"
 
-export default ({ pageContext }) => {
+export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>) => {
   return (
     <Layout
       title="GraphQL logo, brand guidelines and assets"

src/pages/code.tsx

@@ -1,29 +1,33 @@
+import type { PageProps } from "gatsby"
 import { AnchorLink } from "gatsby-plugin-anchor-links"
 import React, { useState } from "react"
 import Layout from "../components/Layout"
 import Marked from "../components/Marked"
 import { toSlug } from "../utils/slug"
 
-export function buildLanguagesMenu(pageContext: any) {
+export function buildLanguagesMenu(pageContext: GatsbyTypes.SitePageContext) {
   return (
     <div className="language-boxes">
-      {pageContext.languageList.map(({ name: languageName }) => {
-        const slug = toSlug(languageName)
-        return (
-          <AnchorLink
-            to={`#${slug}`}
-            className="article language-box"
-            title={languageName}
-          >
-            <span className="article_title">{languageName}</span>
-          </AnchorLink>
-        )
-      })}
+      {pageContext.languageList
+        ?.map(langeuage => langeuage?.name!).filter(Boolean)
+        .map(languageName => {
+          const slug = toSlug(languageName)
+          return (
+            <AnchorLink
+              to={`#${slug}`}
+              className="article language-box"
+              title={languageName}
+            >
+              <span className="article_title">{languageName}</span>
+            </AnchorLink>
+          )
+        })
+      }
     </div>
   )
 }
 
-export function buildLibraryContent(library: any, pageContext: any) {
+export function buildLibraryContent(library: any, pageContext: GatsbyTypes.SitePageContext) {
   const [ overflown, setOverflown ] = useState(false);
   const [ expanded, setExpanded ] = useState(false);
   return (
@@ -113,7 +117,7 @@ export function buildLibraryContent(library: any, pageContext: any) {
   )
 }
 
-export function buildLibraryList(libraries: any[], pageContext: any) {
+export function buildLibraryList(libraries: readonly any[], pageContext: any) {
   return (
     <div className="library-list">
       {libraries.map(library => buildLibraryContent(library, pageContext))}
@@ -194,7 +198,7 @@ export function buildLanguagesContent(pageContext: any) {
   return <div className="languages-content">{elements}</div>
 }
 
-export default ({ pageContext }: any) => {
+export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>) => {
   return (
     <Layout title="GraphQL Code Libraries, Tools and Services" className="code" pageContext={pageContext}>
       <div className="code-hero">
@@ -240,15 +244,15 @@ export default ({ pageContext }: any) => {
                 #
               </AnchorLink>
             </h2>
-            {buildLibraryList(pageContext.otherLibraries.Tools, pageContext)}
+            {buildLibraryList(pageContext.otherLibraries?.Tools ?? [], pageContext)}
             <h2>
               <a className="anchor" id="services"></a>
               Services
               <AnchorLink className="hash-link" to="#services">
                 #
               </AnchorLink>
             </h2>
-            {buildLibraryList(pageContext.otherLibraries.Services, pageContext)}
+            {buildLibraryList(pageContext.otherLibraries?.Services ?? [], pageContext)}
           </div>
         </div>
       <p>Want to improve this page? See the <a href="https://github.com/graphql/graphql.github.io/blob/source/notes/ContributingToCodePage.md">docs here</a>.</p>

src/pages/faq.tsx

@@ -1,17 +1,18 @@
 import React from "react"
 import Layout from "../components/Layout"
 import FAQSection from "../components/FAQSection"
+import type { PageProps } from "gatsby"
 import { graphql } from "gatsby"
 import { useFAQAccordion } from "../utils/useFAQAccordion"
 
-export default ({ pageContext, data }: any) => {
+export default ({ pageContext, data }: PageProps<GatsbyTypes.GetAllFAQSectionsQuery, GatsbyTypes.SitePageContext>) => {
   useFAQAccordion()
 
   const sections = data.allMarkdownRemark.edges
-    .map((e: any) => e.node)
-    .sort((a: any, b: any) => {
-      const aPosition = a.frontmatter.position
-      const bPosition = b.frontmatter.position
+    .map(e => e.node)
+    .sort((a, b) => {
+      const aPosition = a?.frontmatter?.position ?? 0
+      const bPosition = b?.frontmatter?.position ?? 0
       if (aPosition < bPosition) {
         return -1
       }
@@ -28,16 +29,15 @@ export default ({ pageContext, data }: any) => {
             {sections.map(
               (
                 {
-                  frontmatter: { title, permalink },
+                  frontmatter: { title } = {},
                   rawMarkdownBody,
-                }: any,
+                },
               i
             ) => (
               <FAQSection
                 key={i}
-                title={title}
-                permalink={permalink}
-                rawMarkdownBody={rawMarkdownBody}
+                title={title!}
+                rawMarkdownBody={rawMarkdownBody!}
                 pageContext={pageContext}
               />
             )
@@ -51,7 +51,7 @@ export default ({ pageContext, data }: any) => {
 }
 
 export const query = graphql`
-  query getAllFAQSections {
+  query GetAllFAQSections {
     allMarkdownRemark(
       filter: { frontmatter: { permalink: { regex: "/faq/" } } }
     ) {

src/pages/foundation/members.tsx

@@ -1,7 +1,8 @@
 import React from "react"
+import type { PageProps } from "gatsby"
 import Layout from "../../components/Layout"
 
-export default ({ pageContext }) => {
+export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>) => {
   return (
     <Layout title="GraphQL Foundation Members | GraphQL" pageContext={pageContext}>
       <section className="foundation-members-page">

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { PageProps } from "gatsby"
 import Layout from "../components/Layout"
 
 import Hero from "../Containers/Sections/Hero"
@@ -10,7 +11,7 @@ import WithoutVersions from "../Containers/Sections/WithoutVersion"
 import PowerFulTools from "../Containers/Sections/PowerFulTools"
 import WhosUsing from "../Containers/Sections/WhosUsing"
 
-export default ({ pageContext }) => {
+export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>) => {
   return (
     <Layout className={"index"} title="GraphQL | A query language for your API" pageContext={pageContext}>
       <Hero />

src/pages/users.tsx

@@ -1,7 +1,8 @@
 import React from "react"
+import type { PageProps } from "gatsby"
 import Layout from "../components/Layout"
 
-export default ({ pageContext }) => {
+export default ({ pageContext }: PageProps<object, GatsbyTypes.SitePageContext>) => {
   return (
     <Layout title="Who's Using | GraphQL" pageContext={pageContext}>
       <section className="whos-using-page">

src/templates/doc.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { PageProps } from "gatsby"
 import { graphql } from "gatsby"
 import Layout from "../components/Layout"
 import DocsLayout from "../components/DocsLayout"
@@ -7,37 +8,29 @@ import BlogLayout from "../components/BlogLayout"
 import CodeLayout from "../components/CodeLayout"
 import FAQLayout from "../components/FAQLayout"
 
-interface Props {
-  data: any
-  pageContext: any
-}
-
-const layoutMap: any = {
+const layoutMap: Record<string, React.ComponentType<any>> = {
   docs: DocsLayout,
   foundation: FoundationLayout,
   blog: BlogLayout,
   code: CodeLayout,
   faq: FAQLayout,
 }
 
-const Blog = ({ data, pageContext }: Props) => {
+const Blog = ({ data, pageContext }: PageProps<GatsbyTypes.DocTemplateQuery, GatsbyTypes.SitePageContext>) => {
+  const { doc, nextDoc } = data
+  const { frontmatter, rawMarkdownBody } = doc || {}
   const {
-    doc: {
-      frontmatter: {
-        title,
-        date,
-        heroText,
-        permalink,
-        byline,
-        guestBio,
-        layout,
-        tags,
-      },
-      rawMarkdownBody,
-    },
-    nextDoc,
-  } = data
-  const InnerLayout = layoutMap[layout]
+    title,
+    date,
+    heroText,
+    permalink,
+    byline,
+    guestBio,
+    layout,
+    tags,
+  } = frontmatter || {}
+
+  const InnerLayout = layoutMap[layout!]
   return (
     <Layout title={`${title} | GraphQL`} pageContext={pageContext}>
       <InnerLayout
@@ -58,7 +51,7 @@ const Blog = ({ data, pageContext }: Props) => {
 }
 
 export const query = graphql`
-  query LearnQuery($permalink: String!, $nextPermalink: String) {
+  query DocTemplate($permalink: String!, $nextPermalink: String) {
     doc: markdownRemark(frontmatter: { permalink: { eq: $permalink } }) {
       frontmatter {
         title