StaticQuery result cannot be fetched if component in different monorepo package

masimplo commented 5 years ago

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

pieh commented 5 years ago

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

maxpou commented 5 years ago

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

jlengstorf commented 5 years ago

@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?

DSchau commented 5 years ago

@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!

maxpou commented 5 years ago

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

gatsbot[bot] commented 5 years ago

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! 💪💜

tylercrosse commented 5 years ago

@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.

justinmahar commented 5 years ago

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

sidharthachatterjee commented 4 years ago

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!

keevan commented 4 years ago

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:

sidharthachatterjee commented 4 years ago

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)

EmaSuriano commented 4 years ago

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:

Rename it to gatsby-shared-ui
Change the references of the package
Re-install all dependencies.

Now you should be able to use StaticQuery and useStaticQuery 👌

phil-lgr commented 3 years ago

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!

Wish I had seen this before

If you have a gatsby-ui package written in TypeScript, and you have static query in there (in hooks or components), it will fail if you compile that package to .js files.

What I did is import my src TypeScript files directly so Gatsby would stop seeing the same queries twice

IMO that behavior should be explicit and controllable by user cc @sidharthachatterjee

gatsbyjs / gatsby