fix(gatsby): Improve error message when calling useStaticQuery withou…

…t graphql (#23189)

packages/gatsby/cache-dir/gatsby-browser-entry.js

@@ -57,6 +57,19 @@ const useStaticQuery = query => {
     )
   }
   const context = React.useContext(StaticQueryContext)
+
+  // query is a stringified number like `3303882` when wrapped with graphql, If a user forgets
+  // to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to
+  // catch the misuse of the API and give proper direction
+  if (isNaN(Number(query))) {
+    throw new Error(`useStaticQuery was called with a string but expects to be called using \`graphql\`. Try this:
+
+import { useStaticQuery, graphql } from 'gatsby';
+
+useStaticQuery(graphql\`${query}\`);
+`)
+  }
+
   if (context[query] && context[query].data) {
     return context[query].data
   } else {