StaticQuery support requires theme to be named with the gatsby-theme-* prefix

[jonnybot0]

I've got a theme that I'm pulling in as a dependency in package.json.

In my site that consumes the theme, I can get the site to build, but my StaticQueries don't work. Instead of the left nav that I generate from the site's metadata, I just see the text Loading (StaticQuery). There don't appear to be any errors in the terminal or the browser console.

Inside the theme itself, the StaticQueries work okay (provided I hack the gatsby-config.js file to export an object instead of a function).

I updated to gatsby 2.0.88 (from 2.0.49), since I saw #11 and gatsbyjs/gatsby#10786 had recently been merged & closed, but I still have the same problem.

[jonnybot0]

I can see that upgrading fixes a repo with a comparable issue. https://github.com/DSchau/gatsby-theme-static-query-repro

Not sure what it is that's special about my repository. It could be because I'm using the gatsby-typescript-plugin to compile some .tsx layouts, or that I'm using gatsby-mdx. Let me poke around a bit more, see if I can come up with some steps to reproduce.

[ChristopherBiscardi]

gatsbyjs/gatsby#10835 was merged today to fix some issues with StaticQuery. It's released as of gatsby@2.0.89, which is the minimum version for static query support right now. It's likely that you install .88 today just before we released .89 with the fix.

[jonnybot0]

That's helpful, but I'm afraid that's not it. I installed 2.0.89, but still have the problem. I can see that a few plugins are still using 2.0.88. I used yarn resolutions to force everything to use 2.0.89, but I'm still seeing the Loading (StaticQuery) inside the repository that consumes the theme.

Let me see if I can put a gist or sample repo(s) together to reproduce the issue.

[jonnybot0]

So, I implemented the other plugins I'm using (gatsby-typescript-plugin and gatsby-mdx) in a branch based of this sample theme repository. No troubles! I'm satisfied that this isn't a dependency issue. I'm at a bit of a loss for what's going wrong.

I added some debug logging to gatsby-browser-entry.js...

const StaticQuery = props => (
  <StaticQueryContext.Consumer>
    {staticQueryData => {
        console.log("Here's the static query data", staticQueryData)
        console.log("Here's the props", props)
        if (
        props.data ||
        (staticQueryData[props.query] && staticQueryData[props.query].data)
      ) {
        return (props.render || props.children)(
          props.data ? props.data.data : staticQueryData[props.query].data
        )
      } else {
        return <div>Loading (StaticQuery)</div>
      }
    }}
  </StaticQueryContext.Consumer>
)

In the repository where things don't work, the props have a query identifier string, but the query data itself is empty.

Not working:

Here's the static query data : Object {  }
Here's the props : Object { query: "1165575543", render: render() }

It looks like the query is getting assigned an ID, but the data isn't passed on? I can run the same query in the graphql console and get results. 😕

I'm going to see if I can trace back why that is, as that may point me to what's wrong.

[pgegenfurtner]

I had the same issue. As I changed the name in my package.json from (e.g.) 'my-theme' to 'gatsby-theme-my' it worked.

[jonnybot0]

I literally just figured this out @pgegenfurtner . I was diving through the gubbins of how the query extraction worked (mad props to the person who wrote those helpful guides, btw).

I discovered that the list of "additional" repositories that it tries to check is filtered by anything that includes "gatsby-theme-" in its name. Hilariously, the name of my theme was adaptavist-docs-gatsby-theme. So close!!! :P

Now my queries run! Yay!

[ChristopherBiscardi]

oof, yeah that'll be it. We're planning to remove this restriction when Child Theming lands since that includes some code to put the themes into the redux store so other systems can access and use them.

[ChristopherBiscardi]

closed by gatsbyjs/gatsby#12604, thanks @grantglidewell!

[loremipson]

Haven't been able to deep dive into this yet, but it looks like this might still be an issue when using the useStaticQuery hook.