{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2019/03/24/custom-gatsby-metadata-hook/","result":{"data":{"mdx":{"id":"90cc8ca8-38f5-5768-a151-e9ae7ae9a839","frontmatter":{"title":"Creating a Custom React Hook for Gatsby Site Metadata","date":"2019 March 24th","cover":{"id":"a7135207-0c78-5135-9834-a6b103450ca1","publicURL":"/static/cover-110a388f719011cda3551154bc5175af.jpg"}},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"date\": \"2019-03-24T00:00:00.000Z\",\n  \"title\": \"Creating a Custom React Hook for Gatsby Site Metadata\",\n  \"tags\": [\"information\", \"learning\", \"gatsby\", \"staticquery\", \"react\", \"hooks\", \"guide\"],\n  \"published\": true,\n  \"cover\": \"./cover.jpg\",\n  \"coverCredit\": \"Photo by Etienne Girardet on Unsplash\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar YouTube = makeShortcode(\"YouTube\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"hooks-ahoy\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#hooks-ahoy\",\n    \"aria-label\": \"hooks ahoy permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Hooks ahoy!\"), mdx(\"p\", null, \"Ok, let\\u2019s get it on with the new hotness in Reactland, React Hooks!\\nThis is a guide covering using the Gatsby custom React hook for\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" which it is now replacing with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useStaticQuery\"), \".\"), mdx(\"p\", null, \"If you haven\\u2019t used Gatsby before \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" is just that, a way to\\nquery data in a Gatsby component (i.e. a react component) or a Gatsby\\npage where the query input doesn\\u2019t change. This is a great use case\\nfor data that doesn\\u2019t change a great deal, like your site metadata.\"), mdx(\"h2\", {\n    \"id\": \"tldr\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#tldr\",\n    \"aria-label\": \"tldr permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"tl;dr\"), mdx(\"p\", null, \"Here\\u2019s me trying to \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://youtu.be/8ruJBKFrRCk?t=93\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"even\"), \" with \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"codesandbox.io\"), \" whilst I convert some\\nof the Gatsby default starter that\\u2019s on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"codesandbox.io\"), \" to use the\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useSiteMetadata\"), \" custom hook.\"), mdx(\"p\", null, \"Using \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"codesandbox.io\"), \" we take a look at implementing a custom react\\nhook for getting site metadata in Gatsby.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Here\\u2019s a video:\")), mdx(YouTube, {\n    youTubeId: \"qWay-LjXwbk\",\n    mdxType: \"YouTube\"\n  }), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" component uses the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://reactjs.org/docs/render-props.html\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"render props\"), \" pattern, which\\nmeans it takes in a function and returns/renders based off of that.\"), mdx(\"p\", null, \"I have detailed this pattern before in a post about \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://localhost:8899/react-context-api-getting-started\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"using the react\\ncontext api\"), \", it\\u2019s a component that you pass a function to, to render\\na component.\"), mdx(\"p\", null, \"Think of it like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"<Component>\\n {() => ()}\\n</Component>\\n\")), mdx(\"p\", null, \"The first parenthesis is the arguments/variables and the second is\\nwhat gets rendered, so in the case of the Gatsby \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" you\\npass a query with a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"graphql\"), \" tag and then the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" that comes back\\nfrom that is what is used in the render of that component. So you have\\nyour wrapping component that returns and renders a child component,\\nlike this.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), \"<WrappingComponent>\\n  {args => <ComponentToRender propsForComponent={args.propNeeded} />}\\n</WrappingComponent>\\n\")), mdx(\"p\", null, \"Here\\u2019s a cut down version of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" component being used in\\nthe Gatsby default starter on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"codesandbox.io\")), mdx(\"p\", null, \"I\\u2019ve taken out the styling to make it a bit shorter:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const Layout = ({ children }) => (\\n  <StaticQuery\\n    query={graphql`\\n      query SiteTitleQuery {\\n        site {\\n          siteMetadata {\\n            title\\n          }\\n        }\\n      }\\n    `}\\n    render={data => (\\n      <>\\n        <Header siteTitle={data.site.siteMetadata.title} />\\n        <div>\\n          <main>{children}</main>\\n          <footer />\\n        </div>\\n      </>\\n    )}\\n  />\\n);\\n\\nexport default Layout;\\n\")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" takes in two props, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"query\"), \" and what you want to\\nrender with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"render\"), \", this is where you can destructure the data you\\nneed out of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \" prop returned from the query.\"), mdx(\"p\", null, \"I was never really a fan of doing it that way so I adopted a similar\\npattern but with the component contained on it\\u2019s own and then added to\\nthe \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" separately. Like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const Layout = ({ children, data }) => (\\n  <>\\n    <Header siteTitle={data.site.siteMetadata.title} />\\n    <div>\\n      <main>{children}</main>\\n      <footer />\\n    </div>\\n  </>\\n);\\n\\nexport default props => (\\n  <StaticQuery\\n    query={graphql`\\n      query SiteTitleQuery {\\n        site {\\n          siteMetadata {\\n            title\\n          }\\n        }\\n      }\\n    `}\\n    render={data => <Layout data={data} {...props} />}\\n  />\\n);\\n\")), mdx(\"p\", null, \"I found this more acceptable because you didn\\u2019t have to have all the\\ncode bunched into the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" component.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"That all make sense?\")), mdx(\"p\", null, \"Good, now forget about all of that! It\\u2019s time to use the new\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useStaticQuery\"), \" hotness in Gatsby. \\uD83D\\uDCAA\"), mdx(\"h2\", {\n    \"id\": \"versions\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#versions\",\n    \"aria-label\": \"versions permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Versions:\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"This guide is being used with the following dependency versions.\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"gatsby: 2.1.31\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"react: 16.8.4\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"react-dom: 16.8.4\")), mdx(\"p\", null, \"You can also check out the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/1vnvko0zqj\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"example code\"), \".\"), mdx(\"hr\", null), mdx(\"p\", null, \"The \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/docs/use-static-query/\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Gatsby documentation\"), \" covers the use of it and also how to make\\nyour own custom react hook to use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useStaticQuery\"), \", here\\u2019s the one I\\nuse in the video.\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"useSiteMetadata.js\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import { graphql, useStaticQuery } from 'gatsby';\\n\\nconst useSiteMetadata = () => {\\n  const { site } = useStaticQuery(\\n    graphql`\\n      query SITE_METADATA_QUERY {\\n        site {\\n          siteMetadata {\\n            title\\n            description\\n            author\\n          }\\n        }\\n      }\\n    `\\n  );\\n  return site.siteMetadata;\\n};\\n\\nexport default useSiteMetadata;\\n\")), mdx(\"p\", null, \"This can now be implemented in the rest of the code as a function\\ncall:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const { title, description, author } = useSiteMetadata();\\n\")), mdx(\"h2\", {\n    \"id\": \"lets-implement-it\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#lets-implement-it\",\n    \"aria-label\": \"lets implement it permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Let\\u2019s implement it!\"), mdx(\"p\", null, \"In the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"layout\"), \" component import the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useSiteMetadata\"), \" hook then we\\ncan go about removing the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" component and destructuring\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"title\"), \" from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useSiteMetadata\"), \" hook.\"), mdx(\"p\", null, \"It should look something like this, I have taken the styling out for\\nbrevity:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import React from 'react';\\nimport PropTypes from 'prop-types';\\nimport useSiteMetadata from './useSiteMetadata';\\n\\nimport Header from './header';\\nimport './layout.css';\\n\\nconst Layout = ({ children }) => {\\n  const { title } = useSiteMetadata();\\n  return (\\n    <>\\n      <Header siteTitle={title} />\\n      <div>\\n        <main>{children}</main>\\n        <footer>\\n          \\xA9 {new Date().getFullYear()}, Built with\\n          {` `}\\n          <a href=\\\"https://www.gatsbyjs.org\\\">Gatsby</a>\\n        </footer>\\n      </div>\\n    </>\\n  );\\n};\\nLayout.propTypes = {\\n  children: PropTypes.node.isRequired,\\n};\\n\\nexport default Layout;\\n\")), mdx(\"p\", null, \"Here\\u2019s the comparison:\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/9fafa/compareLayout.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"59.7444089456869%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'239\\\\'%3e%3cpath%20d=\\\\'M0%20120v119h10c9%200%2010-1%2010-2l1-2%201%202c0%202%201%202%20189%202h190V0H0v120m0-55l1%2052v-12h29v6h44v-6h119v3c0%202%201%203%202%203l1-30V50h7c6%200%206%200%206%202s0%202%201%201v-2l2-1%203%201h-2l-1%201%201%201%202%201c1%201%201%201%201-1s0-3%202-3c3%200%203%202%201%205l9%201h9v-6h152v3l1%203v1l1%201h1v44l1%208c0%205%200%206-2%206-2%201-3%208%200%208l2%201%204%201%204%201V63l-1-51v13h-10l2%201%201%205c0%204-1%206-2%206l-2%202v3h-87v-2c1-2%200-3-1-3s-2%201-2%203l-1%202-2-1-2-2c-3%200-3%202%200%203%203%200%202%201-2%201l-4-3c0-2%200-2-1%201l-1%203v-3l-1-3v2l-1%202-2-1c0-2-1-2-12-2-7-1-9%200-9%202s-3%201-3-1%200-2-1%200-1%202-1%200c0-3-2-3-2%200s-8%203-8%200c-1-2-10-2-13%200%200%201-1%201-1-1-1-1-1-1-1%201s-3%203-3%200c-1-2-11-2-13%201-1%201-5%202-5%200s0-3-2-3l-2%202c0%201%200%202-4%202-9%200-5%202%204%202l9%201h-2l-1%201%202%201%201%201-9%201h-9l-1-6c-1-7-2-8-3-3v3h-43a176%20176%200%2001-44-2v-2c1-2%201-2-1-2-1%200-2%201-2%203s0%203-5%203-5%200-5-2l-1-3-1%201h-1c-1-1-1-1-1%201s-1%203-13%203c-13%200-14%200-13-4l-1-1-1%203-1%203h134l-1%203v2h-68l-69-1c-1-1%200-4%202-4%201-1-2-1-7-1l-9-1h4c4%200%204%200%204-2l-6-1-6%201-2-1c-1-1-1-1-1%201%200%201%201%202%203%202%201%201-2%201-8%201s-8-1-4-1c6%200%207%200%206-2l-2-2-5%201c-4%200-5%200-5%202-1%202-2%202-10%202H1V22L0%2065m0%200l1%2051v-12h29v-5H1l17-1h17v-5H18L1%2092h39v-5H26c-9%200-14%200-13%201h1l1%201c0%202-2%203-2%201h-1l-1%201v-2c0-2%200-2-5-2-6-1%206-1%2026-1%2013%200%2013%200%2013-3v-2H30c-14%200-15%200-15%202-1%202-1%202-2%201h-1l-1%201v-2l1-2c2%200%203%200%202-2l-2-1c-1%202-2%201-1-1%200-2%203-2%204%200%200%202%202%202%2018%202h17v-3c0-2%200-3-1-2H34C9%2074%200%2074%205%2073c4%200%205-1%205-2%201-2%205-2%205-1l-2%202c-1%201%206%201%2015%201h17v-5H32c-18%200-33%200-26-1%205%200%205%200%205-2v-2l1%202c0%202%201%202%2014%202h14v-5H1l17-1h17v-5H1l14-1h15v-5H1l12-1c12%200%2012%200%2012-3v-2H1V22L0%2065M38%203l2%202h4c1%201%200%201-3%201-4%200-4%200-4%203l1%204h61v-3l-1-4c-1-1%200-1%202-1l3-1c0-3-8-2-9%200%200%202-1%202-4%202s-3%200-2-2c2%200%202-1%201-1H77l1%202-6%201c-6%200-7%200-7-2l-1-2v2c-1%202-2%202-6%202s-4%200-1-1c5%200%204-3-1-3-4%200-5%200-5%202l-2%202c-2%200-2%200-1-1%204-1%202-3-4-3l-6%201m195%200c0%202%201%202%203%202h4c1%201%200%201-3%201-4%200-4%200-4%204v3h39V6h-5c-5%200-6%200-6-2l-1-2v2c-1%202-2%202-6%202-3%200-4%200-2-1h3l1-1c0-1-2-2-11-2l-12%201m54%201l1%201v5l1%202%2022%201h22l1-2c2-5%200-5-21-5-11%200-20%200-18-1h3l1-1c0-1-2-2-6-2s-6%201-6%202M115%207v3l1%202%208%201%208-1c-1-1%200-2%201-2V7c-1-1-15-2-18%200m195%2040v2h79v-2l1-3h-80v3M68%2053v2h125v-5H68v3m23%206v2h102v-5H91v3m-35%205v2l69%201h68v-5h-68c-62%200-69%200-69%202m26%205l-1%202c0%202%202%202%2056%202h57l-1-2v-3h-55l-56%201m-18%205v3l-1%202h131l-1-3v-2h-58a5469%205469%200%2001-71%200m330%2022c0%2017%200%2020%202%2020s2%206-1%206c-1%201%200%201%202%201h3V75h-6v21M48%2082c-1%204-3%204%2073%204h72v-2l1-3h-73l-73%201m-5%207l1%203h149v-2l1-3H43v2m-5%207v2h155v-5H38v3m-3%206v2h158v-5H35v3m52%2016l-1%203v2h29c33%200%2036%200%2036-3%200-2-2-3-2-1h-1c-1-2-3-2-30-2l-31%201M0%20184l1%2050v-6h10c9%200%209%200%209%203a522495%20522495%200%200192%203h84v-13H19v3l1%203H1v-49l-1-49v55m71%2015l1%201h1l2%201c2%200%202%200%200%201l28%201h31v-2c-1-3-8-4-7-1l-2%202-2-1-1-3-2%202-1%202-1-1c1-2-4-3-6-2h-5l-3%201c0%202-1%202-6%202l-6-1h5l4-1-3-1-4-1-2%202-2%202v-4l-1%202c-1%202-4%203-4%201s0-3-2-3l-2%201h-4l-3-1-3%201m191%200l3%202c2%200%202%200%200%201-1%201%2012%201%2029%201h30l1-2%202-3h-5l-4%202-2%202-2-2c0-3-4-2-4%200s0%202-1%201c0-2-4-3-6-2h-2l-7%201c0%202-11%203-11%201h5l4-1c0-2-9-2-10%200h-1v-2l-2%202c0%202%200%202-2%200s-8-3-8%200h-1c-1-2-6-3-6-1\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/60a22/compareLayout.webp 160w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/4c812/compareLayout.webp 320w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/0ba47/compareLayout.webp 640w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/e46b2/compareLayout.webp 960w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/af3f0/compareLayout.webp 1280w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/18d80/compareLayout.webp 1565w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/69538/compareLayout.png 160w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/72799/compareLayout.png 320w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/6af66/compareLayout.png 640w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/d9199/compareLayout.png 960w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/21b4d/compareLayout.png 1280w\", \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/9fafa/compareLayout.png 1565w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/ea4dd0fb5890ca0f00a8d98e9f57a0df/6af66/compareLayout.png\",\n    \"alt\": \"compareLayout\",\n    \"title\": \"compareLayout\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"On now to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"seo\"), \" component, same again, remove \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" and\\nuse \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useSiteMetadata\"), \" in it\\u2019s place.\"), mdx(\"p\", null, \"Here\\u2019s the comparison:\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0e2968ec8991f7a0c3f41e1b64986288/9f9a4/compareSEO.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"47.628205128205124%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/svg+xml,%3csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'400\\\\'%20height=\\\\'191\\\\'%3e%3cpath%20d=\\\\'M0%2021v21h5l5%201H0v18h6l7%201H0v129h401V61h-4l-4-1%204-1%204%201V30c0-17%200-30-1-29h-3L199%200H0v21m252-7l-1%202-3%203h-9l-3-1c-3%200-4%200-3%203%200%204%204%205%206%203h9l27%201h27v-7h-50l1-2c0-3%200-4-1-2M55%2017c1%202%200%202-3%201l-7%201-6%201-3%201c0%202%2014%203%2031%203h8v-6h-9c-9%200-10%200-10-2-1-1-1-1-1%201m36%202v2l1%202%2020%201c15%200%2019-1%2019-2l1-1v-2H91m227%200v2l1%202c0%202%201%202%208%202s8%200%208-2l1-2c3-2-2-3-9-3l-9%201m-75%2015l2%201%201%201h-4c-4%200-6%202-6%204%200%203-3%202-3%200-1-2-13-2-12%200%200%202-1%202-7%202s-7%200-7-2l-1-2v2c0%202-1%202-5%202h-5l15%201c14%200%2014%200%2014%203s-18%203-18%200l-1-2v2c0%202-1%202-5%202-3%200-5%200-4%201l4%201c4%200%205%200%205%202l1%203v-3c0-2%200-2%2012-2%2010%200%2011%200%2011%202s1%202-21%202l-13%201%206%201%207%201h1l13-1h12v2c0%203%200%203-9%203s-10%200-10-2c-1-2-1-2-1%200s0%202-10%202l15%201c13%200%2024%200%2023%201-3%200-3%203%200%203l2-2c0-2%201-2%208-2l8%201h-8c-5%200-7%201-7%202l2%201c1%201-6%201-15%201-17%200-17%200-17-2l-1-2v2c0%202%200%202-10%202l-9%201h9c10%200%2010%200%2010%202%200%203%200%203-9%203l-9%201h9c8%200%209%200%209%202l1%203v-3c0-2%200-2%2014-2%2016%200%2016%200%2015%203%200%202-1%202-25%202l-15%201c9%200%2010%200%2010%202l1%203v-5h88a4105%204105%200%200029-1c-56%200-60%200-60-2%201-2-11-3-12-1h-6l-6-1%2072-1h73l-68-1h-67v-5h135l-59-1h-58v-5h58a1794%201794%200%2000-13-1h-70v-3l-1-2h71a916%20916%200%2000-73-4c0-2%201-2%2072-2a996%20996%200%2000-71-6%2011442%2011442%200%200098-2h-46v-3c0-3%200-3-3-3-2%200-3%200-3-2%200-1%200-2-5-1-3%200-2%202%201%202l2%201h-23v-1l2-1c0-1-1-2-3-2-3%200-4%201-4%202l1%201%201%201c0%202-4%200-5-2s-10-2-9%200l-2%202-2-2c0-2%200-2-1%200%200%202-1%202-1%201l-1-2-2-1-2%202M24%2039c-1%202%200%203%204%203h3c-2%200-3%207-2%208v1c-2%203-1%205%203%205h4l-4%201c-6%201-4%202%203%203l8-1h1c0%202-1%202-15%202H13l5%201c6%200%206%200%206%203%200%204%202%204%202%200v-3l1%203%201%203h23l25-1v-4l59-1%2061-1H47v-2c0-3%200-3%209-3%206%200%208%200%207-1-2-1%200-2%202-1l1-2c-1-3%200-3%201-3%202%200%202%200%201%201-2%203-1%204%205%204%208-1%2010%200%208%201-1%201%200%201%203%201%202%200%203%200%202-1-2-1-1-1%205-1l3-1h1c2%202%207%201%207-1l-5-1c-11%200-12%200-11-1l-2-2-2-2%201-2%2056-1%2057-1H41v-2c0-2%200-2-1-1v2l-2%201-2-2c0-1-1-2-6-2l-6%201m192%2032v2h15c14%200%2015-1%2015-2%200-2-1-3-15-3h-15v3m-10%2012c0%202-1%202-4%202l-5%201%206%201%206%201h-1c-2-1-2-1-2%201s-1%202-4%202l-5%201%205%201c4%200%204%200%204%202v2l1-3%2014-1c14%200%2014%200%2014%202v3h-38l17%201h16v2c0%204-14%204-14%201l-1-2v2c0%202%200%202-10%202l-9%201h9c10%200%2010%200%2010%202%200%203%200%203-10%203l-9%201h19v3l1%204v-7h178l-83-1h-83v-5h166l-80-1h-80l-1-3v-2h80a3014%203014%200%2000-74-2v-2c0-2%208-2%2077-2a1134%201134%200%20002-2h-75l1-2v-2h74a1074%201074%200%2000-73-3c1%201-2%201-19%201l-19-1h2l1-1c-1-2-4-2-4%200m5%204l-1%202c-1%202%201%202%2015%202%2015%201%2017%200%2016-3l-15-1h-15m-69%2038h-2c-1-1-12-1-12%201h-1l-1-2v2h-1c0-1-2-1-2%201l10%201%2022-1h1c2%202%2015%201%2015%200%200-2-7-3-7-1h-1c0-2-1-2-8-1l-9-1c0-1-2-1-4%201m186%200h-7l-2%201c0%202%201%202%203%202l12%201%209-1h4c7%201%2028%200%2029-1s2%200%203%201h9l5-1c0-2-4-3-5-2h-8l-12-1h-21c-10-1-17-1-19%201m-29%2048l-2%201c-2-1-3%200-3%201s1%202%203%202h46c3%200%204%200%204-2l-1-1h-2c0-2-2-1-2%201h-1c-1-2-2-2-12-3-6%200-8%200-7%201h-23m-63%202c0%202%201%202%206%202h24l1%201%201-3c0-2%200-2-1-1l-2%201-11-1h-16l-1-1-1%202\\\\'%20fill=\\\\'%23d3d3d3\\\\'%20fill-rule=\\\\'evenodd\\\\'/%3e%3c/svg%3e')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"picture\", {\n    parentName: \"a\"\n  }, \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/0e2968ec8991f7a0c3f41e1b64986288/60a22/compareSEO.webp 160w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/4c812/compareSEO.webp 320w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/0ba47/compareSEO.webp 640w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/e46b2/compareSEO.webp 960w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/af3f0/compareSEO.webp 1280w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/9fbc2/compareSEO.webp 1560w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/webp\"\n  })), \"\\n        \", mdx(\"source\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"srcSet\": [\"/static/0e2968ec8991f7a0c3f41e1b64986288/69538/compareSEO.png 160w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/72799/compareSEO.png 320w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/6af66/compareSEO.png 640w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/d9199/compareSEO.png 960w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/21b4d/compareSEO.png 1280w\", \"/static/0e2968ec8991f7a0c3f41e1b64986288/9f9a4/compareSEO.png 1560w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"type\": \"image/png\"\n  })), \"\\n        \", mdx(\"img\", _extends({\n    parentName: \"picture\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"src\": \"/static/0e2968ec8991f7a0c3f41e1b64986288/6af66/compareSEO.png\",\n    \"alt\": \"compareSEO\",\n    \"title\": \"compareSEO\",\n    \"loading\": \"lazy\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    }\n  })), \"\\n      \"), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"If you want to check out the code the example is available here:\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://codesandbox.io/s/1vnvko0zqj\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"example code\")), mdx(\"h2\", {\n    \"id\": \"wrap-up\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#wrap-up\",\n    \"aria-label\": \"wrap up permalink\",\n    \"className\": \"anchor-toc before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Wrap up!\"), mdx(\"p\", null, \"That\\u2019s it! Wh have gone from using the awesome \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"StaticQuery\"), \" render\\nprops pattern used in Gatsby over to the even more awesome\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useStaticQuery\"), \" React hooks, hook.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Thanks for reading\"), \" \\uD83D\\uDE4F\"), mdx(\"p\", null, \"Please take a look at my other content if you enjoyed this.\"), mdx(\"p\", null, \"Follow me on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/spences10\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Twitter\"), \" or \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/spences10/ama\",\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"Ask Me Anything\"), \" on GitHub.\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Hooks ahoy! Ok, let's get it on with the new hotness in Reactland, React Hooks!\nThis is a guide covering using the Gatsby custom React hook…","tableOfContents":{"items":[{"url":"#hooks-ahoy","title":"Hooks ahoy!"},{"url":"#tldr","title":"tl;dr"},{"url":"#versions","title":"Versions:"},{"url":"#lets-implement-it","title":"Let's implement it!"},{"url":"#wrap-up","title":"Wrap up!"}]},"timeToRead":2,"fields":{"slug":"/2019/03/24/custom-gatsby-metadata-hook/","editLink":"https://github.com/spences10/thelocalhost.blog/edit/authoring/posts/2019/03/24/custom-gatsby-metadata-hook/index.mdx"}}},"pageContext":{"slug":"/2019/03/24/custom-gatsby-metadata-hook/","previous":{"id":"ab675f5d-9bed-5185-951c-afd9bcc3a740","excerpt":"Moving to the new hotness!! I've now moved this blog over to Gatsby MDX. You can see all the\nchanges\n on my repo here . From the pull I'm hoping you can glean that the majority of the work\nis in replacing  gatsby-transformer-remark  with  gatsby-mdx…","frontmatter":{"title":"Testing MDX","date":"2019-03-09T00:00:00.000Z"},"fields":{"slug":"/2019/03/09/testing-mdx/"}},"next":{"id":"790fc137-bd43-5f5d-bc6d-3152575edfad","excerpt":"Already use WSL with Ubuntu? Want an Upgrade?? This is a guide that will cover upgrading Windows Subsystem Linux\n(WSL) from the current LTS version to the latest 'normal' version\n18.10. I found this post on  dev.to  this weekend detailing going from…","frontmatter":{"title":"Update Windows Subsystem Linux Ubuntu from 18.04 to 18.10","date":"2019-04-01T00:00:00.000Z"},"fields":{"slug":"/2019/04/01/update-wsl-from-18.04-18.10/"}}}}}