Can I useStaticQuery in client-only routes?

[thclark]

Background

Most of my app is in a client-only route, and I'm only rendering a few top level routes with "traditional" gatsby.

It could almost be a CRA app but I'd like to stick to gatsby (the upgrade paths between versions are handled really well, gatsby cloud is slick AF, hundreds more reasons...)

However, I have a lot of content in the client-only part that's fairly static and should be managed in a CMS.

Example use case

A simple example of this would be a background image in the app sidebar:

• Using CRA I'd have to manually prepare multiple assets for multiple breakpoints, then manually handle all the image stuff (nightmare).
• On a straightforward SSR route I'd use my DatoCMS plugin to just query for multiple image breakpoints then shove it into GatsbyImage (painless and slick).
• Ideally, on a client-only route, I'd be able to use that same plugin to fetch that data at build time, but then use the data at run-time to render the component.

The question

Can useStaticQuery work this way?

Has anyone had this issue and how do you go about solving it?

Workaround / My approach

My approach so far is to run a massive query for everything I need at the top level of my [...].js route, then make that available in a context for the rest of the app (efficient because the context never changes). Whilst this should work OK, it seems a little like an antipattern compared to the usual way of working with Gatsby.