diff --git a/packages/gatsby/cache-dir/gatsby-browser-entry.js b/packages/gatsby/cache-dir/gatsby-browser-entry.js index e46c9e0c38578..23f03a3088fa5 100644 --- a/packages/gatsby/cache-dir/gatsby-browser-entry.js +++ b/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 {