How do I query an external GraphQL endpoint in Gatsby JS?

Question

I don't seen any clear way to query an outside GraphQL endpoint (i.e. https://somewebsite.com/graphql) for data. Has anyone else done this, and how did you do it?

I assume it requires you to build a custom plugin, but that seems overkill for such a simple need. I have searched the docs and this issue doesn't really ever get addressed. 🤔

Answer 1

In Gatsby V2 you don't need to create your own plugin.

What you need is a plugin called gatsby-source-graphql

gatsby-source-graphql uses schema stitching to combine the schema of a third-party API with the Gatsby schema.

You can find more info here.

Answer 2

The answer is, as you mentioned, writing a new source plugin. This is how Gatsby gets the data into it's internal GraphQL structure to then query.

Plugins are, at their core, just additions to the gatsby-node, gatsby-browser, and gatsby-ssr files. So you could write the logic needed at the top of your gatsby-node file to avoid abstracting it out into it's own plugin.