Add gatsby-plugin-graphql-codegen

zandaleph · Jan 23, 2020 · f078106 · f078106
1 parent 4d29c36
commit f078106
Show file tree

Hide file tree

Showing 11 changed files with 3,355 additions and 233 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -9,6 +9,12 @@ module.exports = {
   plugins: [
     `gatsby-plugin-typescript`,
     `gatsby-plugin-tslint`,
+    {
+      resolve: `gatsby-plugin-graphql-codegen`,
+      options: {
+        fileName: `types/graphql-type.ts`,
+      },
+    },
     `gatsby-plugin-emotion`,
     {
       resolve: `gatsby-plugin-typography`,

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -40,7 +40,7 @@ exports.createPages = async ({ graphql, actions }) => {
   result.data.allMdx.edges.forEach(({ node }) => {
     createPage({
       path: node.fields.slug,
-      component: path.resolve(`./src/templates/blog-post.js`),
+      component: path.resolve(`./src/templates/blog-post.tsx`),
       context: {
         slug: node.fields.slug,
       },
@@ -53,7 +53,7 @@ exports.createPages = async ({ graphql, actions }) => {
       });
       createPage({
         path: node.frontmatter.legacyPath,
-        component: path.resolve(`./src/templates/redirect.js`),
+        component: path.resolve(`./src/templates/redirect.tsx`),
         context: {
           slug: node.fields.slug,
         },

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "gatsby-image": "^2.2.7",
     "gatsby-plugin-catch-links": "^2.1.15",
     "gatsby-plugin-emotion": "^4.1.13",
+    "gatsby-plugin-graphql-codegen": "^2.1.1",
     "gatsby-plugin-manifest": "^2.2.4",
     "gatsby-plugin-mdx": "^1.0.58",
     "gatsby-plugin-nullish-coalescing-operator": "^1.0.1",

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -6,24 +6,16 @@ import { rhythm } from '../utils/typography';
 
 import Header from './Header';
 
+import { SiteTitleQuery } from '../../types/graphql-type';
+
 // Let's guarantee Amplify is configured on every page
 import Amplify from 'aws-amplify';
 import config from '../aws-exports';
 Amplify.configure(config);
 
-interface LayoutData {
-  site: {
-    siteMetadata: {
-      title: string;
-      description: string;
-      author: string;
-    };
-  };
-}
-
 export default function Layout({ children }: React.PropsWithChildren<{}>) {
-  const data: LayoutData = useStaticQuery(graphql`
-    query SiteTitleQuery {
+  const data: SiteTitleQuery = useStaticQuery(graphql`
+    query SiteTitle {
       site {
         siteMetadata {
           title
@@ -33,17 +25,18 @@ export default function Layout({ children }: React.PropsWithChildren<{}>) {
       }
     }
   `);
+  const { title, description, author } = data.site?.siteMetadata ?? {};
   return (
     <>
       <Helmet
-        title={data.site.siteMetadata.title}
+        title={title ?? ''}
         meta={[
           {
             name: 'description',
-            content: data.site.siteMetadata.description,
+            content: description ?? '',
           },
           { name: 'keywords', content: 'sample, something' },
-          { name: 'author', content: data.site.siteMetadata.author },
+          { name: 'author', content: author ?? '' },
         ]}
       >
         <html lang="en" />
@@ -56,7 +49,7 @@ export default function Layout({ children }: React.PropsWithChildren<{}>) {
           padding-top: ${rhythm(1.5)};
         `}
       >
-        <Header siteTitle={data.site.siteMetadata.title} />
+        <Header siteTitle={title ?? ''} />
         {children}
       </div>
     </>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -4,28 +4,14 @@ import { Link, graphql } from 'gatsby';
 
 import Layout from '../components/Layout';
 
-interface Query {
-  allMdx: {
-    totalCount: number;
-    edges: {
-      node: {
-        id: string;
-        frontmatter: {
-          title: string;
-        };
-        fields: {
-          slug: string;
-        };
-      };
-    }[];
-  };
-}
+import { BlogIndexQuery } from '../../types/graphql-type';
 
 interface Props {
-  data: Query;
+  data: BlogIndexQuery;
 }
 
 export default function IndexPage({ data }: Props) {
+  const edges = data?.allMdx?.edges ?? [];
   return (
     <Layout>
       <h1>A Website</h1>
@@ -35,9 +21,9 @@ export default function IndexPage({ data }: Props) {
         riveting weblog entries.
       </p>
       <ul>
-        {data.allMdx.edges.map(({ node }) => (
+        {edges.map(({ node }) => (
           <li key={node.id}>
-            <Link to={node.fields.slug}>{node.frontmatter.title}</Link>
+            <Link to={node.fields?.slug ?? ''}>{node.frontmatter?.title}</Link>
           </li>
         ))}
       </ul>
@@ -46,7 +32,7 @@ export default function IndexPage({ data }: Props) {
 }
 
 export const query = graphql`
-  query {
+  query BlogIndex {
     allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
       totalCount
       edges {

diff --git a/src/templates/blog-post.js → src/templates/blog-post.tsx b/src/templates/blog-post.js → src/templates/blog-post.tsx
@@ -4,29 +4,34 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { css } from '@emotion/core';
 import ordinal from 'ordinal';
 import Layout from '../components/Layout';
+import { BlogPostQuery } from '../../types/graphql-type';
 
-export default function BlogPost({ data }) {
+interface Props {
+  data: BlogPostQuery;
+}
+
+export default function BlogPost({ data }: Props) {
   const post = data.mdx;
-  const fm = post.frontmatter;
-  const date = `${fm.month} ${ordinal(parseInt(fm.day))}, ${fm.year}`;
+  const fm = post?.frontmatter;
+  const date = `${fm?.month} ${ordinal(parseInt(fm?.day))}, ${fm?.year}`;
   return (
     <Layout>
-      <h1>{fm.title}</h1>
+      <h1>{fm?.title}</h1>
       <p>Posted {date} by Zack Spencer</p>
       <p
         css={css`
           font-style: italic;
         `}
       >
-        {fm.lead}
+        {fm?.lead}
       </p>
-      <MDXRenderer>{post.body}</MDXRenderer>
+      <MDXRenderer>{post?.body ?? ''}</MDXRenderer>
     </Layout>
   );
 }
 
 export const query = graphql`
-  query($slug: String!) {
+  query BlogPost($slug: String!) {
     mdx(fields: { slug: { eq: $slug } }) {
       body
       frontmatter {

diff --git a/src/templates/redirect.js b/src/templates/redirect.js
diff --git a/src/templates/redirect.tsx b/src/templates/redirect.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { navigate } from 'gatsby';
+
+interface Props {
+  pageContext: {
+    slug: string;
+  };
+}
+
+export default function Redirect({ pageContext }: Props) {
+  useEffect(() => {
+    navigate(pageContext.slug, { replace: true });
+  });
+  return null;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -69,5 +69,5 @@
     /* Advanced Options */
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   },
-  "include": ["./src/**/*"]
+  "include": ["./src/**/*", "./types/**/*"]
 }