fix(static-query): Use @babel/traverse for traversing algorithm

[victorandcode]

Hello 👋 , this PR fixes #10016.

Summary

After digging deep into the rabbit hole of the traversal algorithm in /packages/gatsby/src/internal-plugins/query-runners/file-parser.js, I found out that the traversing algorithm wasn't taking into account the ast nodes of type JSXFragment. Internally, this is because considered in the babel-types version used by babel-traverse v6.26. Therefore, I am using now the more updated @babel/traverse which is a dependency this package already had.

Test code

I created a simple gatsby new gastsby-test and created a index with the following code

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'

import Layout from '../components/layout'

const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

const IndexPage = () => (
  <Layout>
      <>
        <h1>Hello world!</h1>
        <StaticQuery query={query} render={() => (<div>Hello world</div>)}/>
      </>
  </Layout>
)

export default IndexPage

Then, tested it out with before the changes (displaying loading forever) and after the changes (displays correct text). It works fine and tests are still passing 😄

Let me know if you have any comments
Cheers

[jgierer12]

Thanks! We should probably also change the dependency in package.json and yarn.lock

[pieh]

We could also update https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/resolve-module-exports.js (only other place where we import babel-traverse). If this is drop-in replacement hopefully this is just matter of adjusting import.

Thanks! We should probably also change the dependency in package.json and yarn.lock

We already have @babel/traverse@^7 in dependencies. So if above is done, then we would need just to remove babel-traverse@^6 from deps and update lock file.

One thing that could be helpful is to adjust (or add new test) for checking correctness of StaticQuery extraction if its inside <> in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/__tests__/file-parser.js

[pieh]

And btw - Awesome job on figuring this one out - it looks like really fringe issue to debug

[victorandcode]

Thanks @pieh :) I'll make those changes and update the PR shortly.

[KyleAMathews]

Woah! Thanks for reaching deep and finding this! 🙏

[pieh]

Verified locally and works as advertised - once again - awesome debugging to figure this one out! Thanks @victor-cordova!

[gatsbot]

Holy buckets, @victor-cordova — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!