title: Gatsby useStatciQuery react hook errors
body: <p>I'm a newer developer and just diving right into gatsby.  I have a working db and the graphql endpoint works fine in the sandbox page, but when I moved the query into a hook that is called by a component, I'm running into an error</p>
  <blockquote>
  <p>React Hook &quot;useStaticQuery&quot; is called in function &quot;getCoinsByBuzz&quot; that is neither a React function
  component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names
  must start with the word &quot;use&quot;  react-hooks/rules-of-hooks</p>
  </blockquote>
  <p>The code is very similar to the examples on Gatsby's docs.</p>
  <pre><code>
  import { graphql, useStaticQuery } from &quot;gatsby&quot;;
  
  export const getCoinsByBuzz = () =&gt; {
      const { dataset } = useStaticQuery(graphql`
      query coinsByBuzz {
          coins {
              coinByBuzzChange {
              coinName
              timestamp
              symbol
              value
              buzzScore
              buzzScoreDelta6
              timestampDelta6  
              }
          }
      }`);
    
      return dataset.coinsByBuzz;
  };
  </code></pre>
  <pre><code>
  import * as React from &quot;react&quot;
  // import { Line } from &quot;react-chartjs-2&quot;;
  import {
      Chart as ChartJS,
      CategoryScale,
      LinearScale,
      PointElement,
      LineElement,
      Title,
      Tooltip,
      Legend,
  } from &quot;chart.js&quot;;
  import { getCoinsByBuzz } from &quot;../hooks/getCoinsByBuzz&quot;
  
  
  ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
  
  export const LineChart = () =&gt; {
      const { dataset } = getCoinsByBuzz();
      console.log(dataset);
      return (
          &lt;div style={{ width: '750px' }}&gt;
            &lt;p&gt;{dataset}&lt;/p&gt;
          &lt;/div&gt; 
      );
  };
  </code></pre>