Gatsby: StaticQuery result cannot be fetched if component in different monorepo package

Created on 14 Mar 2019 · 12Comments · Source: gatsbyjs/gatsby

Description

I have a StaticQuery inside a component that is not executed. The component is part of a shared-ui package of a monorepo. Another package of the monorepo imports the shared-ui package in order to use it.

Steps to reproduce

Following this Gatsby blog post I have created a project that has 3 packages. One shared-ui and two Gatsby sites. In the shared-ui I have defined a SEO component that has this static query:

graphql`
  query SEO {
    site {
      buildTime(formatString: "YYYY-MM-DD")
      siteMetadata {
        siteUrl
        defaultTitle: title
        defaultDescription: description
        defaultBanner: banner
        headline
        siteLanguage
        ogLanguage
        author
        twitter
        facebook
      }
    }
  }

I then include this component in a gatsby site package (called site) like:

import { SEO } from '@monorepo-site/shared-ui';

const MainLayout = ({ children, stickyHeader }) => (
  <GlobalLayout>
    <SEO />
    <Header sticky={stickyHeader} />
    {children}
    <Footer />
    <ShareThis />
  </GlobalLayout>
);

shared-ui package.json:

{
  "name": "@monorepo-site/shared-ui",
  "description": "Lerna monorepo",
  "version": "1.0.2",
  "private": true,
  "dependencies": {
    "gatsby": "2.1.2",
    "gatsby-image": "2.0.32",
    "gatsby-plugin-canonical-urls": "2.0.12",
    "gatsby-plugin-facebook-pixel": "1.0.3",
    "gatsby-plugin-google-marketing-platform": "0.1.1",
    "gatsby-plugin-netlify": "2.0.12",
    "gatsby-plugin-purgecss": "3.1.0",
    "gatsby-plugin-react-helmet": "3.0.9",
    "gatsby-plugin-sass": "2.0.11",
    "gatsby-plugin-sharp": "2.0.27",
    "gatsby-plugin-web-font-loader": "1.0.4",
    "gatsby-source-filesystem": "2.0.24",
    "gatsby-transformer-sharp": "2.1.16",
    "npm-run-all": "^4.1.5",
    "react": "16.8.4",
    "react-cookie-consent": "2.2.2",
    "react-device-detect": "1.6.2",
    "react-dom": "16.8.4",
    "react-helmet": "5.2.0"
  }
}

site package.json:

{
  "name": "@monorepo-site/site",
  "description": "Gatsby Public Website",
  "version": "1.0.2",
  "private": true,
  "dependencies": {
    "@monorepo-site/shared-ui": "^1.0.1",
    "@reach/router": "1.2.1",
    "axios": "0.18.0",
    "bootstrap": "4.3.1",
    "cheerio": "1.0.0-rc.2",
    "core-js": "2.6.1",
    "date-fns": "1.30.1",
    "disqus-react": "1.0.5",
    "dotenv": "7.0.0",
    "gatsby": "2.1.2",
    "gatsby-awesome-pagination": "0.3.4",
    "gatsby-image": "2.0.32",
    "gatsby-plugin-canonical-urls": "2.0.12",
    "gatsby-plugin-facebook-pixel": "1.0.3",
    "gatsby-plugin-feed": "2.0.14",
    "gatsby-plugin-google-marketing-platform": "0.1.1",
    "gatsby-plugin-lodash": "3.0.5",
    "gatsby-plugin-manifest": "2.0.23",
    "gatsby-plugin-netlify": "2.0.12",
    "gatsby-plugin-purgecss": "3.1.0",
    "gatsby-plugin-react-helmet": "3.0.9",
    "gatsby-plugin-sass": "2.0.11",
    "gatsby-plugin-sharp": "2.0.27",
    "gatsby-plugin-sitemap": "2.0.8",
    "gatsby-plugin-web-font-loader": "1.0.4",
    "gatsby-source-filesystem": "2.0.24",
    "gatsby-source-wordpress": "3.0.21",
    "gatsby-transformer-sharp": "2.1.16",
    "html-entities": "1.2.1",
    "lodash": "4.17.11",
    "node-sass": "4.11.0",
    "npm-run-all": "^4.1.5",
    "parcel-bundler": "1.12.1",
    "prop-types": "15.7.2",
    "react": "16.8.4",
    "react-cookie-consent": "2.2.2",
    "react-device-detect": "1.6.2",
    "react-dom": "16.8.4",
    "react-helmet": "5.2.0",
    "react-modal-video": "1.2.1",
    "react-netlify-form": "2.1.4",
    "react-slick": "0.23.2",
    "react-sticky-box": "0.8.0",
    "request": "2.88.0",
    "rxjs": "6.4.0",
    "sendmail": "1.4.1",
    "serve": "10.0.0",
    "sharethis-reactjs": "1.3.3",
    "sharp": "0.21.3",
    "slick-carousel": "1.8.1",
    "srcset": "1.0.0",
    "striptags": "3.1.1",
    "uuid": "3.3.2",
    "valid-url": "1.0.9"
  },
  "scripts": {
    "start": "serve public",
    "build": "gatsby build",
    "clean": "rimraf .cache public",
    "prebuild": "npm run clean",
    "develop": "npm run clean && gatsby develop -p 8001",
    "format": "prettier --write 'src/**/*.js'",
    "test": "jest test --config ../../jest-config.json"
  },
  "devDependencies": {
    "rimraf": "2.6.3"
  },
  "resolutions": {
    "gatsby-source-filesystem/got": "9.4.0"
  }
}

root package.json:

{
  "name": "site-gatsby",
  "description": "Gatsby Public sites",
  "version": "0.1.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "dependencies": {
    "lerna": "3.13.1",
    "react": "16.8.4"
  },
  "scripts": {
    "run:site": "cd packages/site && yarn develop",
    "run:landing-pages": "cd packages/landing-pages && yarn develop",
    "run:all": "npm-run-all --parallel run:site run:landing-pages"
  },
  "devDependencies": {
    "babel-eslint": "10.0.1",
    "eslint": "5.15.1",
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-prettier": "4.1.0",
    "eslint-config-standard": "12.0.0",
    "eslint-config-react-app": "3.0.8",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-node": "8.0.1",
    "eslint-plugin-promise": "4.0.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-standard": "4.0.0",
    "rimraf": "2.6.3"
  },
  "engines": {
    "node": "8.12.0"
  }
}

Expected result

The query should be executed as normal and results should be returned.

Actual result

I get an error:

gatsby-browser-entry.js:46 Uncaught Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at useStaticQuery (gatsby-browser-entry.js:46)
    at SEO (SEO.jsx:10)
    at ProxyFacade (react-hot-loader.development.js:757)
    at renderWithHooks (react-dom.development.js:12892)
    at mountIndeterminateComponent (react-dom.development.js:14974)
    at beginWork (react-dom.development.js:15579)
    at performUnitOfWork (react-dom.development.js:19266)
    at workLoop (react-dom.development.js:19306)
    at renderRoot (react-dom.development.js:19389)
    at performWorkOnRoot (react-dom.development.js:20296)
    at performWork (react-dom.development.js:20208)
    at performSyncWork (react-dom.development.js:20182)
    at requestWork (react-dom.development.js:20051)
    at scheduleWork (react-dom.development.js:19865)
    at scheduleRootUpdate (react-dom.development.js:20526)
    at updateContainerAtExpirationTime (react-dom.development.js:20554)
    at updateContainer (react-dom.development.js:20611)
    at ReactRoot.../../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20907)
    at react-dom.development.js:21044
    at unbatchedUpdates (react-dom.development.js:20413)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:21040)
    at render (react-dom.development.js:21109)
    at app.js:56

_Note: this query executes correctly and brings back data when executed inside the GraphQL explorer._

Moving the component in the site package instead of the shared-ui, makes the error go away.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 73.0.3683.75
    Firefox: 65.0.1
    Safari: 12.0.3
  npmGlobalPackages:
    gatsby-cli: 2.4.15

GraphQL

Source

masimplo

👍10

Most helpful comment

Hey guys,
Thank you so much for your time.
It seems that the problem disappear after clearing the cache folder. I didn't cleaned Gastby's cache since a while... that's what happens when we play with experimental features.
Cheers

maxpou on 1 Apr 2019

👍3

All 12 comments

We currently don't support static queries defined in places other than current site. This is something we will need to implement, just not yet sure how exactly we will do that, because we need to parse all files to extract those queries and examining all files in node_modules is just very expensive and not very viable.

This is also why we didn't yet publish standalone SEO component that we use in our starters (f.e. in https://github.com/gatsbyjs/gatsby-starter-default/blob/master/src/components/seo.js) because that StaticQuery would not be currently picked up by Gatsby

/cc @DSchau

pieh on 14 Mar 2019

Hey,

I'm facing the same problem in a different context. My theme has a component that uses useStaticQuery hooks. My theme works fine.
But when my website want to use this hook, it's another story. I have this error (Error: The result of this StaticQuery could not be fetched.). If I remove the hooks, I don't have error.

I don't understand because I took inspiration from jason-theme(https://github.com/jlengstorf/gatsby-theme-jason-blog/blob/master/src/hooks/use-site-metadata.js).
@jlengstorf: you did something specific to bypass this error? (gatsby-theme-jason-blog and lengstorf.com doesn't seems to be a monorepo...).

Cheers

maxpou on 26 Mar 2019

@maxpou do you have the code somewhere we can poke at? I’m pretty sure this got patched, but I could be wrong. @ChristopherBiscardi didn't we get static queries working in themes, or am I doing magic somehow?

jlengstorf on 28 Mar 2019

@maxpou the algorithm for this is here. If you're using your theme in gatsby-config.js it should make its way into the query compiler and be extracted.

If at all possible, as @jlengstorf mentioned, a reproduction would be super helpful!

DSchau on 28 Mar 2019

maxpou on 1 Apr 2019

👍3

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

gatsbot[bot] on 22 Apr 2019

@maxpou had another issue involving static queries in a theme that has been resolved but I think @masimplo's originial issue is still unresolved.

Supporting static queries defined in places other than the current site

It looks like there is some potential to resolve this using themes or potentially listing packages that contain static queries in the gatsby-config but it's unclear what that would look like and a PR is missing.

tylercrosse on 22 Apr 2019

👍2

To anyone landing here that still can't resolve their issue, make sure you're not using a component inside wrapRootElement (in gatsby-browser.js) that uses StaticQuery or useStaticQuery. Tricky, but that was the problem for me.

See: https://github.com/gatsbyjs/gatsby/issues/7747

justinmahar on 10 Jul 2019

👍1

We've since added support for queries in arbitrary packages as long as the package has gatsby in its name.

Closing this since this is no longer an issue as a result. Thanks!

sidharthachatterjee on 16 Jan 2020

We've since added support for queries in arbitrary packages as long as the package has gatsby in its name.

Closing this since this is no longer an issue as a result. Thanks!

Hi @sidharthachatterjee, does this mean as per https://www.gatsbyjs.org/blog/2019-01-01-publish-multiple-gatsby-sites/ the package.json name key needs to contain the word gatsby in it for it to work with static queries?

Is it possible to expose a way to configure this keyword(s)?

Ref:

keevan on 16 Jan 2020

Yes. The package name needs to contain the gatsby keyword. Configuration is currently not supported.

We do this to keep expectations clear for users that a library contains gatsby components (React components that use Gatsby queries)

We _did_ consider using peer dependencies for this heuristic but that was slow and there is prior art for a name based heuristic (like babel and eslint plugins)

sidharthachatterjee on 16 Jan 2020

👍2

I faced the same issue and I can confirm that by following the solution provided by @sidharthachatterjee works!

In summary, if you have a package called shared-ui: