[docs][guides] better document Gatsby GraphQL APIs

[marcysutton]

Summary

As part of #13708, GraphQL is a key workflow we want to visit to clear up common learning barriers and improve troubleshooting. In addition to "Querying Data" recipes, GraphQL APIs in Gatsby could be better documented all around. Things like:

• pageQuery API
• staticQuery API
• useStaticQuery API
• query APIs like sort, limit, etc.

Making these APIs easy to find and more scannable/digestible would be a huge improvement. Further, in feedback from Gatsbyjs.org, there were these comments in reference to the Querying Data in pages doc:

"I'm trying to find information on the name of the constant being exported as a graphql query. Does it need to be called "query"? I've seen other examples exporting "pageQuery", what is Gatsby actually doing here?"

"I was looking on how to add variables to a query, but I couldn't find it here or anywhere else"

Adding some pages to the Gatsby API section would help surface these details without having to guess what page they're on; i.e. "Understanding GraphQL Syntax" isn't an intuitive place to look for API docs. The Reference Guide pages could stick around, and link to these new API docs.

There was also this comment regarding the Querying with GraphQL doc, which further supports this API doc direction:

"This seems like a good place for documentation on the queries and mutations that Gatsby supports, not an introduction to GraphQL, which should be delegated to the official GraphQL documentation."

I'm keeping this inkteam-assigned for now so we can take a close look at this in @gatsbyjs/learning, as an FYI.

[martinfoakes]

Not sure if here is the best place to expand on this, or whether it belongs in its own issue. But in this same vein of improving GraphQL documentation, the doc on testing-components-with-graphql.md has sections on testing Page Queries, and testing StaticQuery, but nothing on setting up testing when using useStaticQuery hook in components.