Declaring what data your UI binds to is not a side effect, so co-locating GraphQL queries with your component doesn't necessarily introduce side effects. You don't have to co-locate GraphQL mutation queries to your component, you can just have your event handlers (or other mutation-creating events) handled elsewhere in your app.

> What happens when two components used in two totally different areas of a single page need common data? Relying on a cache feels like a hack.

When declaring what data you rely on is as simple as a GraphQL query, it's basically like declaring what data goes in your component. It's NOT like building ORM layers directly into your UI components.