title: How to fix gatsby_1 is undefined
body: <p>I'm trying to use graphquery with react and gatsby but I can't get the data. I could get the data if it's written in js. How can I fix it? Thanks.</p>
  
  <p>I started it from gatsby typesript starter but it doesn't work properly.</p>
  
  <pre><code>Uncaught ReferenceError: gatsby_1 is not defined
      at ./src/templates/index-page.tsx.exports.IndexPageTemplate (index-page.tsx:56)
  </code></pre>
  
  <pre><code>index.js:2177 The above error occurred in the &lt;TemplateWrapper&gt; component:
      in TemplateWrapper (created by IndexPage)
  
  
  React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
  </code></pre>
  
  <p>I changed sitemetadata file from js to tsx and then the error happeend</p>
  
  <p>SiteMetaData.tsx</p>
  
  <pre><code>import { graphql, useStaticQuery } from "gatsby";
  
  const useSiteMetadata = () =&gt; {
    const { data } = useStaticQuery(
      graphql`
        query GetSiteMetaData{
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `
    );
    return data.siteMetaData;
  };
  
  export default useSiteMetadata;
  
  </code></pre>
  
  <p>Layout.tsx</p>
  
  <pre><code>import * as React from "react";
  import Helmet from "react-helmet";
  import Footer from "../Organisms/Footer";
  import Navbar from "../Organisms/Navbar";
  import useSiteMetadata from "../Organisms/SiteMetadata";
  
  interface TemplateWrapperProps {
    children: React.ReactChild;
  }
  
  const TemplateWrapper: React.SFC&lt;TemplateWrapperProps&gt; = ({ children }) =&gt; {
  
    const { title, description }: any = useSiteMetadata();
    return (
      &lt;div&gt;
        &lt;Helmet&gt;
          &lt;html lang="ja" /&gt;
          &lt;title&gt;{title}&lt;/title&gt;
          &lt;meta name="description" content={description} /&gt;
  
          &lt;meta name="theme-color" content="#fff" /&gt;
  
          &lt;meta property="og:type" content="business.business" /&gt;
          {/**&lt;meta property="og:title" content={title} /&gt; */}
          &lt;meta property="og:url" content="/" /&gt;
          &lt;meta property="og:image" content="/img/og-image.jpg" /&gt;
          &lt;meta name="viewport" content="width=device-width,initial-scale=1" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
        &lt;/Helmet&gt;
        &lt;Navbar /&gt;
        &lt;div&gt;{children}&lt;/div&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  };
  
  export default TemplateWrapper;
  
  </code></pre>