Merge pull request #1102 from cometkim/typegen

Stricter GraphQL typing using gatsby-plugin-typegen

Author: Urigo

.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>