package updates, put StaticQuery queries into variables

.codeclimate.yml

@@ -1,5 +0,0 @@
-version: "2"
-checks:
-  method-lines:
-      config:
-        threshold: 50 # Gatsby's StaticQuery makes render functions pretty long

package.json

@@ -21,11 +21,11 @@
   },
   "dependencies": {
     "file-saver": "^1.3.8",
-    "gatsby": "^2.0.0-rc.11",
+    "gatsby": "^2.0.0-rc.13",
     "gatsby-image": "^2.0.0-rc.1",
     "gatsby-plugin-manifest": "^2.0.2-rc.1",
     "gatsby-plugin-matomo": "^0.5.0",
-    "gatsby-plugin-offline": "^2.0.0-rc.3",
+    "gatsby-plugin-offline": "^2.0.0-rc.4",
     "gatsby-plugin-react-helmet": "^3.0.0-rc.1",
     "gatsby-plugin-sass": "^2.0.0-rc.2",
     "gatsby-plugin-sharp": "^2.0.0-rc.3",

src/components/atoms/LogoUnit.jsx

@@ -4,6 +4,15 @@ import { StaticQuery, graphql } from 'gatsby'
 import Logo from '../svg/Logo'
 import styles from './LogoUnit.module.scss'
 
+const query = graphql`
+  query {
+    dataYaml {
+      title
+      tagline
+    }
+  }
+`
+
 class LogoUnit extends PureComponent {
   constructor(props) {
     super(props)
@@ -28,14 +37,7 @@ class LogoUnit extends PureComponent {
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              title
-              tagline
-            }
-          }
-        `}
         render={data => {
           const meta = data.dataYaml
           const { minimal } = this.state

src/components/atoms/SEO.jsx

@@ -15,35 +15,37 @@ function truncate(n, useWordBoundary) {
   )
 }
 
-const SEO = ({ project }) => (
+const query = graphql`
-  <StaticQuery
+  query {
-    query={graphql`
+    dataYaml {
-      query {
+      title
-        dataYaml {
+      tagline
-          title
+      description
-          tagline
+      url
-          description
+      email
-          url
+      img {
-          email
+        childImageSharp {
-          img {
+          resize(width: 980) {
-            childImageSharp {
+            src
-              resize(width: 980) {
-                src
-              }
-            }
           }
-          social {
-            Email
-            Blog
-            Twitter
-            GitHub
-            Dribbble
-          }
-          gpg
-          addressbook
         }
       }
-    `}
+      social {
+        Email
+        Blog
+        Twitter
+        GitHub
+        Dribbble
+      }
+      gpg
+      addressbook
+    }
+  }
+`
+
+const SEO = ({ project }) => (
+  <StaticQuery
+    query={query}
     render={data => {
       const meta = data.dataYaml
 

src/components/atoms/Typekit.js

@@ -17,15 +17,17 @@ const TypekitScript = typekitID => (
   </script>
 )
 
+const query = graphql`
+  query {
+    dataYaml {
+      typekitID
+    }
+  }
+`
+
 const Typekit = () => (
   <StaticQuery
-    query={graphql`
+    query={query}
-      query {
-        dataYaml {
-          typekitID
-        }
-      }
-    `}
     render={data => {
       const { typekitID } = data.dataYaml
 

src/components/atoms/Vcard.jsx

@@ -3,35 +3,37 @@ import { StaticQuery, graphql } from 'gatsby'
 import FileSaver from 'file-saver'
 import vCard from 'vcf'
 
-const Vcard = () => (
+const query = graphql`
-  <StaticQuery
+  query {
-    query={graphql`
+    dataYaml {
-      query {
+      title
-        dataYaml {
+      tagline
-          title
+      description
-          tagline
+      url
-          description
+      email
-          url
+      avatar {
-          email
+        childImageSharp {
-          avatar {
+          original: resize {
-            childImageSharp {
+            src
-              original: resize {
-                src
-              }
-            }
           }
-          social {
-            Email
-            Blog
-            Twitter
-            GitHub
-            Dribbble
-          }
-          gpg
-          addressbook
         }
       }
-    `}
+      social {
+        Email
+        Blog
+        Twitter
+        GitHub
+        Dribbble
+      }
+      gpg
+      addressbook
+    }
+  }
+`
+
+const Vcard = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const meta = data.dataYaml
 

src/components/molecules/Availability.jsx

@@ -4,6 +4,18 @@ import { StaticQuery, graphql } from 'gatsby'
 import { MoveIn } from '../atoms/Animations'
 import styles from './Availability.module.scss'
 
+const query = graphql`
+  query {
+    dataYaml {
+      availability {
+        status
+        available
+        unavailable
+      }
+    }
+  }
+`
+
 class Availability extends PureComponent {
   constructor(props) {
     super(props)
@@ -12,17 +24,7 @@ class Availability extends PureComponent {
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              availability {
-                status
-                available
-                unavailable
-              }
-            }
-          }
-        `}
         render={data => {
           const { availability } = data.dataYaml
           const { status, available, unavailable } = availability

src/components/molecules/Head.jsx

@@ -4,16 +4,18 @@ import { StaticQuery, graphql } from 'gatsby'
 import SEO from '../atoms/SEO'
 import Typekit from '../atoms/Typekit'
 
+const query = graphql`
+  query {
+    dataYaml {
+      title
+      tagline
+    }
+  }
+`
+
 const Head = () => (
   <StaticQuery
-    query={graphql`
+    query={query}
-      query {
-        dataYaml {
-          title
-          tagline
-        }
-      }
-    `}
     render={data => {
       const { title, tagline } = data.dataYaml
 

src/components/molecules/Networks.jsx

@@ -12,6 +12,20 @@ import Dribbble from '../svg/Dribbble'
 import icons from '../atoms/Icons.module.scss'
 import styles from './Networks.module.scss'
 
+const query = graphql`
+  query {
+    dataYaml {
+      social {
+        Email
+        Blog
+        Twitter
+        GitHub
+        Dribbble
+      }
+    }
+  }
+`
+
 const NetworkIcon = props => {
   switch (props.title) {
     case 'Email':
@@ -57,19 +71,7 @@ class Network extends PureComponent {
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              social {
-                Email
-                Blog
-                Twitter
-                GitHub
-                Dribbble
-              }
-            }
-          }
-        `}
         render={data => {
           const meta = data.dataYaml
 

src/components/molecules/ProjectNav.jsx

@@ -5,6 +5,26 @@ import Img from 'gatsby-image'
 import FullWidth from '../atoms/FullWidth'
 import styles from './ProjectNav.module.scss'
 
+const query = graphql`
+  query {
+    allProjectsYaml {
+      edges {
+        node {
+          title
+          slug
+          img {
+            childImageSharp {
+              fluid(maxWidth: 500, quality: 85) {
+                ...GatsbyImageSharpFluid_noBase64
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 const ProjectLink = ({ node }) => (
   <Link className={styles.link} to={node.slug}>
     <Img
@@ -54,25 +74,7 @@ class ProjectNav extends Component {
 
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            allProjectsYaml {
-              edges {
-                node {
-                  title
-                  slug
-                  img {
-                    childImageSharp {
-                      fluid(maxWidth: 500, quality: 85) {
-                        ...GatsbyImageSharpFluid_noBase64
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        `}
         render={data => {
           const projects = data.allProjectsYaml.edges
 

src/components/organisms/Footer.jsx

@@ -5,6 +5,23 @@ import LogoUnit from '../atoms/LogoUnit'
 import Networks from '../molecules/Networks'
 import styles from './Footer.module.scss'
 
+const query = graphql`
+  query {
+    # the package.json file
+    portfolioJson {
+      name
+      homepage
+      repository
+      bugs
+    }
+
+    dataYaml {
+      title
+      gpg
+    }
+  }
+`
+
 class Footer extends PureComponent {
   constructor(props) {
     super(props)
@@ -15,22 +32,7 @@ class Footer extends PureComponent {
   render() {
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            # the package.json file
-            portfolioJson {
-              name
-              homepage
-              repository
-              bugs
-            }
-
-            dataYaml {
-              title
-              gpg
-            }
-          }
-        `}
         render={data => {
           const pkg = data.portfolioJson
           const meta = data.dataYaml

src/components/organisms/Header.jsx

@@ -7,6 +7,16 @@ import ThemeSwitch from '../molecules/ThemeSwitch'
 import LogoUnit from '../atoms/LogoUnit'
 import styles from './Header.module.scss'
 
+const query = graphql`
+  query {
+    dataYaml {
+      availability {
+        status
+      }
+    }
+  }
+`
+
 class Header extends PureComponent {
   constructor(props) {
     super(props)
@@ -34,15 +44,7 @@ class Header extends PureComponent {
 
     return (
       <StaticQuery
-        query={graphql`
+        query={query}
-          query {
-            dataYaml {
-              availability {
-                status
-              }
-            }
-          }
-        `}
         render={data => {
           const meta = data.dataYaml
 

src/pages/404.jsx

@@ -16,8 +16,6 @@ class NotFound extends Component {
   constructor(props) {
     super(props)
     this.state = { gif: '' }
-
-    this.handleClick = this.handleClick.bind(this)
   }
 
   componentDidMount() {
@@ -36,7 +34,7 @@ class NotFound extends Component {
       })
   }
 
-  handleClick(e) {
+  handleClick = e => {
     e.preventDefault()
     this.getRandomGif()
   }