How to find Graphql query datasource?

Question

Disclaimer: I am pretty new to this technology.

I have a website built with Gatsby that uses different data sources. Is there a way to understand if a specific graphql query on a page comes from a specific plugin?

Answer 1

Most likely you can distinguish the data source from the naming of the data types. if you go to http://localhost:8000/___graphql while running the project in your local environment on the left side you can see all the data types. The data types usually starts with "all+data source" or just "data source name". In the picture below my data source is Contentful and all the data coming from there are starting with "allContentful+content name".

Answer 2

Gatsby sources it's data through underlying APIs that "Source Plugins" (https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/creating-a-source-plugin/#what-is-a-source-plugin) use to populate Gatsby's data store. Those source plugins are most often npm packages that you can install, but you can also have a local source plugin in your gatsby-node.js. In the latter case you should read gatsby-node.js and see if it contains a sourceNodes export.

So you'll want to check your gatsby-config.js what plugins are defined there. This array can either directly contain the individual plugins or it can contain themes (https://www.gatsbyjs.com/docs/themes/what-are-gatsby-themes/). Those themes itself will have a gatsby-config.js then.

So with this knowledge you know which source plugins are active in your site. They often namespace their queries, so e.g. gatsby-source-contentful has the namespace allContentful. You can explore those queries at localhost:8000/___graphql when you have gatsby develop running.

Answer 3

Inspect a page, Developer Tools => Network; See every request that send your website; what script send the request, is it yours or not ? analyze the result of each request. I think this can help.