docs: Add a note about gatsby-image fragments not working in GraphiQL

[MarkBennett]

This is a known issue, but it could confuse new Gatsby users (like myself).

See the gatsby-image docs for details, and this GraphiQL issue for progress on a fix.

Description

Add a note about gatsby-image query fragments not working in GraphiQL.

Documentation

This is a documentation change.

Related Issues

• Plugin: Gatsby-style implicit fragments graphql/graphiql#612

[acao]

hey @MarkBennett ! good point. I'm the primary maintainer for graphiql and a gatsby employee, and this is one of the issues we plan on solving with graphiql@2 and our upcoming gatsby graphiql preset

what might be a better fix for the documentation is to include the fragment that needs to be included in the graphiql query. these shared fragments are actually appended to the user queries defined at runtime, so that abstraction is why it doesn't work in graphiql currently.

[MarkBennett]

Thanks for the quick reply!

That would be great, as I'd very much like to use the fragments in my queries as well.

How might I include them? I'll update the docs but don't know myself. 😉

[acao]

to note, gatsby image contains docs that warns these queries won't work in GraphiQL here
https://www.gatsbyjs.org/packages/gatsby-image/#fragments

because these fragments are generated on the fly, unlike the static ones used in some plugins, I actually don't think there is a way to use these in GraphiQL yet, without being able to describe the entire fragment

[MarkBennett]

to note, gatsby image contains docs that warns these queries won't work in GraphiQL here

Yes. That's my understanding as well. I've linked to those in my note about why the queries in the tutorial won't work in GraphiQL.

I'm mostly thinking including a note near the first query would help new learners undertand about the fragments, as right now there's just an error and it's unclear if it's expected or not.

[acao]

@MarkBennett oh of course, yes this makes sense. Thanks for the PR :D

Some nice improvements to this coming soon!

[MarkBennett]

Thanks! It looks like I'm failing on your CI, but I can't see the linter output.

Will look closer when I'm at my computer.

[AishaBlake]

Looks good! I'm excited for the changes Rikki mentioned but adding this line to the tutorial should be helpful. Thanks for the contribution, @MarkBennett!

[gatsbot]

Holy buckets, @MarkBennett — 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!