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,9 +15,7 @@ function truncate(n, useWordBoundary) {
   )
 }
 
-const SEO = ({ project }) => (
+const query = graphql`
-  <StaticQuery
-    query={graphql`
   query {
     dataYaml {
       title
@@ -43,7 +41,11 @@ const SEO = ({ project }) => (
       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 Typekit = () => (
+const query = graphql`
-  <StaticQuery
-    query={graphql`
   query {
     dataYaml {
       typekitID
     }
   }
-    `}
+`
+
+const Typekit = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const { typekitID } = data.dataYaml
 

src/components/atoms/Vcard.jsx

@@ -3,9 +3,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import FileSaver from 'file-saver'
 import vCard from 'vcf'
 
-const Vcard = () => (
+const query = graphql`
-  <StaticQuery
-    query={graphql`
   query {
     dataYaml {
       title
@@ -31,7 +29,11 @@ const Vcard = () => (
       addressbook
     }
   }
-    `}
+`
+
+const Vcard = () => (
+  <StaticQuery
+    query={query}
     render={data => {
       const meta = data.dataYaml
 

src/components/molecules/Availability.jsx

@@ -4,15 +4,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import { MoveIn } from '../atoms/Animations'
 import styles from './Availability.module.scss'
 
-class Availability extends PureComponent {
+const query = graphql`
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    return (
-      <StaticQuery
-        query={graphql`
   query {
     dataYaml {
       availability {
@@ -22,7 +14,17 @@ class Availability extends PureComponent {
       }
     }
   }
-        `}
+`
+
+class Availability extends PureComponent {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <StaticQuery
+        query={query}
         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 Head = () => (
+const query = graphql`
-  <StaticQuery
-    query={graphql`
   query {
     dataYaml {
       title
       tagline
     }
   }
-    `}
+`
+
+const Head = () => (
+  <StaticQuery
+    query={query}
     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,17 +5,7 @@ import LogoUnit from '../atoms/LogoUnit'
 import Networks from '../molecules/Networks'
 import styles from './Footer.module.scss'
 
-class Footer extends PureComponent {
+const query = graphql`
-  constructor(props) {
-    super(props)
-
-    this.state = { year: new Date().getFullYear() }
-  }
-
-  render() {
-    return (
-      <StaticQuery
-        query={graphql`
   query {
     # the package.json file
     portfolioJson {
@@ -30,7 +20,19 @@ class Footer extends PureComponent {
       gpg
     }
   }
-        `}
+`
+
+class Footer extends PureComponent {
+  constructor(props) {
+    super(props)
+
+    this.state = { year: new Date().getFullYear() }
+  }
+
+  render() {
+    return (
+      <StaticQuery
+        query={query}
         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()
   }