{"record":{"id":"f5e2fc7dc9097028","repo":"gatsbyjs/gatsby","slug":"usestaticquery-was-called-with-a-string-but-expect","errorCode":null,"errorMessage":"useStaticQuery was called with a string but expects to be called using `graphql`. Try this:\n\nimport { useStaticQuery, graphql } from 'gatsby';\n\nuseStaticQuery(graphql`${query}`);\n","messagePattern":"useStaticQuery was called with a string but expects to be called using `graphql`\\. Try this:\n\nimport (.+?) from 'gatsby';\n\nuseStaticQuery\\(graphql`(.+?)`\\);\n","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/gatsby/cache-dir/static-query.js","lineNumber":72,"sourceCode":"const useStaticQuery = query => {\n  if (\n    typeof React.useContext !== `function` &&\n    process.env.NODE_ENV === `development`\n  ) {\n    // TODO(v5): Remove since we require React >= 18\n    throw new Error(\n      `You're likely using a version of React that doesn't support Hooks\\n` +\n        `Please update React and ReactDOM to 16.8.0 or later to use the useStaticQuery hook.`\n    )\n  }\n\n  const context = React.useContext(StaticQueryContext)\n\n  // query is a stringified number like `3303882` when wrapped with graphql, If a user forgets\n  // to wrap the query in a grqphql, then casting it to a Number results in `NaN` allowing us to\n  // catch the misuse of the API and give proper direction\n  if (isNaN(Number(query))) {\n    throw new Error(`useStaticQuery was called with a string but expects to be called using \\`graphql\\`. Try this:\n\nimport { useStaticQuery, graphql } from 'gatsby';\n\nuseStaticQuery(graphql\\`${query}\\`);\n`)\n  }\n\n  if (context[query]?.data) {\n    return context[query].data\n  } else {\n    throw new Error(\n      `The result of this StaticQuery could not be fetched.\\n\\n` +\n        `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +\n        `please open an issue in https://github.com/gatsbyjs/gatsby/issues`\n    )\n  }\n}\n","sourceCodeStart":54,"sourceCodeEnd":90,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/packages/gatsby/cache-dir/static-query.js#L54-L90","documentation":"`useStaticQuery` must receive the result of a `graphql\\`...\\`` tagged-template literal. That tag turns the query into a stringified numeric hash (e.g. `\"3303882\"`). The hook runs `Number(query)` and treats `NaN` as proof the query was never tagged, because a raw string (or any non-numeric text) is the signature of an untagged query.","triggerScenarios":"Calling `useStaticQuery(\"query { site { title } }\")`, `useStaticQuery(someStringVar)`, or `useStaticQuery(query)` where `query` is a plain string and `graphql` was never imported/applied.","commonSituations":"Forgetting to import `graphql` from `gatsby`; copy-pasting a query from GraphiQL as a string; migrating a render-prop `StaticQuery` to `useStaticQuery` and dropping the tag; bundlers that strip or mis-order tagged-template processing.","solutions":["Add `import { useStaticQuery, graphql } from \"gatsby\"` and call `useStaticQuery(graphql\\`...\\`)`.","Confirm the literal is an inline tagged template, not a variable holding a string.","If using a `.graphql` file or fragment composition, still wrap the imported text with `graphql\\`...\\`` at the call site or use `StaticQuery` query prop instead.","After fixing, restart `gatsby develop` so the query extractor re-runs."],"exampleFix":"// before\nconst data = useStaticQuery(query)\n// after\nimport { useStaticQuery, graphql } from \"gatsby\"\nconst data = useStaticQuery(graphql`\n  query SiteTitleQuery { site { siteMetadata { title } } }\n`)","handlingStrategy":"type-guard","validationCode":"// useStaticQuery requires a graphql-tagged literal.\n// Static lint rule: install `eslint-plugin-graphql` / Gatsby's eslint config\n// and disallow plain string arguments via the `graphql/template-strings` rule.\n","typeGuard":"// A graphql-tagged literal is a string whose value is a stringified number.\nfunction isGraphqlTagged(value: unknown): boolean {\n  return typeof value === \"string\" && value.trim() !== \"\" && !Number.isNaN(Number(value))\n}\n","tryCatchPattern":null,"preventionTips":["Always import `graphql` from `gatsby` in the same file that calls `useStaticQuery`.","Use an ESLint rule for graphql template strings so untagged queries fail at lint time.","Never pass a runtime variable into `useStaticQuery`; inline the tagged template."],"tags":["react","graphql","gatsby","hooks","use-static-query"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}