feat(gatsby): Allow alternative import syntax for useStaticQuery

[jfrolich]

Description

Currently useStaticQuery can only be imported like this to work:

import { useStaticQuery } from 'gatsby'

I'm in process of writing bindings to Gatsby for ReasonML/Bucklescript. Currently it compiles every ES6 import like this

import * as Gatsby from 'gatsby'
...
Gatsby.useStaticQuery(...)

With this syntax the static query is not extracted in the babel plugin. This PR fixes that.

Documentation

I don't think this needs to be a documented feature. It is nice though that it works for people that prefer this syntax for various reasons, but it shouldn't be the sanctioned way to import useStaticQuery.

[jfrolich]

I didn't know there was some transformation code outside of this plugin, so I also fix the part in the gatsby package.

[pvdz]

Hi! This looks good. I have some styling issues that should be trivial to address. Please have a look and let me know what you think.

Thank you for your contribution!

[jfrolich]

I incorporated all feedback and improved the babel code a bit more. Including allowing the following syntax for page queries:

import { graphql } from 'gatsby'

const query = graphql`
  query PageQueryIndirect2 {
    foo
  }
`;

const query2 = query;
export { query2 };

Let me know what you think!

[pvdz]

For future reference (not blocking on this right now) we can do const node = binding.path?.node here now :D

[jfrolich]

Ah ok! Pretty nice indeed!

[pvdz]

Awesome! Thank you for your contribution 🚀

[gatsbot]

Holy buckets, @jfrolich — 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. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
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!