[v2] StaticQuery doesn't work with typescript

[dannywils]

Description

StaticQuery's are forever stuck in the "Loading (StaticQuery)" state in both development and production build when using typescript.

Steps to reproduce

I've created a minimal example reproducing the issue.

https://github.com/dannywils/gatsby-typescript-staticquery

Expected result

The StaticQuery should be extracted, executed and the render function should be called with the query results.

Actual result

The static query is replaced with Loading (StaticQuery)

Environment

• Gatsby version: 2.0.0-alpha.43
• gatsby-cli version: 1.1.53
• Node.js version: v10.0.0
• Operating System: Windows 10 (16299.431)

File contents (if changed)

gatsby-config.js: https://github.com/dannywils/gatsby-typescript-staticquery/blob/master/gatsby-config.js
package.json: https://github.com/dannywils/gatsby-typescript-staticquery/blob/master/package.json
gatsby-node.js: https://github.com/dannywils/gatsby-typescript-staticquery/blob/master/gatsby-node.js
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[dannywils]

I've narrowed this down to not being a typescript issue, but actually due to JSX being transpiled before it hits the file parser.

Using static queries without JSX example does not work because the resulting AST is different than expected here: https://github.com/gatsbyjs/gatsby/blob/v2/packages/gatsby/src/internal-plugins/query-runner/file-parser.js#L119

For example this expression will reproduce the issue in a regular JS gatsby environment:

React.createElement(StaticQuery, {
  query: graphql`
    query LayoutQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `,
  render: data => data.site.siteMetadata.title
});

Should the file parser be modified to extract graphql queries from createElement calls?

[KyleAMathews]

Should the file parser be modified to extract graphql queries from createElement calls?

Yeah — that seems like a good solution. Would help with other compile-to-js languages as well.

[KyleAMathews]

Want to do a PR?

[mquandalle]

Wouldn't the switch from ts-loader to @babel/preset-typescript discussed in #5520 fix this issue?

[dannywils]

Yeah that should do it! For ts-loader setting JSX to "preserve" in compilerOptions fixes the issue as well because babel transpiles the JSX after the static queries are extracted.

https://www.typescriptlang.org/docs/handbook/jsx.html

If the short-term plan is to switch to babel's typescript preset then no further action should be required.

[ascorbic]

I'm still getting this with beta.11. I get Loading (StaticQuery) in development, and in production I get

Error: ./src/pages/index.tsx Module not found: Error: Can't resolve '../../public/static/d/2999245696.json' in '/Users/matt/Documents/repos/site-rebuild/src/pages'

I've changed jsx to preserve, with no effect. Should I open a new issue?

[stasgavrylov]

I just wanted to point out that this bug is still reproducible.
I'm using gatsby@2.0.46 and gatsby-plugin-typescript@2.0.1.

StaticQuery in TS component works fine in dev mode, but produces Loading (StaticQuery) in build output.

I wish I'd find this issue earlier. Changing my component to plain JS fixed the problem.

[portenez]

Hi, this issue is still happening on gatsby@2.18.4 + gatsby-plugin-typescript@2.1.20. I guess we probably need to open a new ticket.