gatsbyjs/gatsby · error

We couldn't load " /page-data/sq/d/ .json

Error message

We couldn't load "${__PATH_PREFIX__}/page-data/sq/d/${staticQueryHash}.json"

What it means

Thrown by ProdLoader when fetching a static query result JSON file from the server fails. During production page load, Gatsby fetches /page-data/sq/d/<hash>.json for each static query (useStaticQuery / StaticQuery). If the HTTP request fails or returns an error, the .catch handler throws this error with the full URL.

Solutions

  1. Verify the static query JSON exists at the reported URL by opening it directly in a browser or using curl.
  2. Ensure your deployment includes the entire public/page-data/ directory, including the sq/d/ subdirectory.
  3. If using a CDN, purge the cache after deploying a new build so old hashes don't 404.
  4. Check hosting configuration (e.g. nginx, Netlify, Vercel) serves JSON files with correct content-type and no redirect rules that break the path.

Example fix

# before — deployment missing page-data
# only public/ root uploaded, page-data/sq/d/ omitted

# after — ensure full recursive upload
rsync -av --delete public/ user@host:/var/www/site/
# or in CI: ensure `gatsby build` output (public/) is uploaded in full
Defensive patterns

Strategy: retry

Validate before calling

// Pre-deploy check: verify static query JSONs exist in public/
const fs = require('fs')
const path = require('path')

function checkStaticQueryOutputs(publicDir) {
  const sqDir = path.join(publicDir, 'page-data', 'sq', 'd')
  if (!fs.existsSync(sqDir)) {
    console.warn('No static query output directory found')
    return
  }
  const files = fs.readdirSync(sqDir)
  console.log(`Found ${files.length} static query JSON files`)
}
checkStaticQueryOutputs('public')

Try / catch

// Add a retry wrapper around static query fetches in custom code
// (Gatsby's loader handles this internally, but for custom fetches:)
async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const res = await fetch(url)
      if (res.ok) return res.json()
    } catch {}
    await new Promise(r => setTimeout(r, 1000 * (i + 1)))
  }
  throw new Error(`Failed to load ${url}`)
}

Prevention

When it happens

Trigger: The browser sends a GET request for the static query JSON and it fails — network error, 404 (file not deployed), 500 (server error), or CORS issue. The .catch in the loader swallows the original error and throws this generic message.

Common situations: Incomplete deployment (static query JSON files not uploaded to the CDN/host), CDN cache miss returning 404, intermittent network failures on mobile/slow connections, deploying a new build while users have an older bundle cached (hash mismatch), or a hosting config that doesn't serve .json files from public/page-data/.

Related errors


AI-assisted analysis of gatsbyjs/gatsby@8b06340921 (2026-08-13). Data as JSON: /api/errors/14b4893eb8d71202. Report an issue: GitHub.

Appendix: source

Thrown at packages/gatsby/cache-dir/loader.js:553

        // get list of static queries to get
        const staticQueryBatchPromise = Promise.all(
          dedupedStaticQueryHashes.map(staticQueryHash => {
            // Check for cache in case this static query result has already been loaded
            if (this.staticQueryDb[staticQueryHash]) {
              const jsonPayload = this.staticQueryDb[staticQueryHash]
              return { staticQueryHash, jsonPayload }
            }

            return this.memoizedGet(
              `${__PATH_PREFIX__}/page-data/sq/d/${staticQueryHash}.json`
            )
              .then(req => {
                const jsonPayload = JSON.parse(req.responseText)
                return { staticQueryHash, jsonPayload }
              })
              .catch(() => {
                throw new Error(
                  `We couldn't load "${__PATH_PREFIX__}/page-data/sq/d/${staticQueryHash}.json"`
                )
              })
          })
        ).then(staticQueryResults => {
          const staticQueryResultsMap = {}

          staticQueryResults.forEach(({ staticQueryHash, jsonPayload }) => {
            staticQueryResultsMap[staticQueryHash] = jsonPayload
            this.staticQueryDb[staticQueryHash] = jsonPayload
          })

          return staticQueryResultsMap
        })

        return (
          Promise.all([componentChunkPromises, staticQueryBatchPromise])
            .then(([pageResources, staticQueryResults]) => {

View on GitHub (pinned to 8b06340921)