When to load assets with graphQL in gatsby.js

Ive begun building a project with Gatsby.js and im kinda of at a crossroads. I understand graphQL queries are made at page load. However with the use of the StaticQuery component or useStatucQuery hook, you can now send queries at the component level as well. Ive seen many examples of this done, i just dont know what the benefits are. Is the data/assets queried at a more appropriate time? Should i be querying only the data and assets that will be displayed in the viewport, and make separate queries in other components further down the page for their data? For example, my site has a hero section and header that will be displayed initially. Should i only query for the assets that will be displayed? Or just make a query for all the data and assets the page requires on the initial page load?