Prevent unnecessary loading after SSR

At the moment, Query components with the loadOnMount prop automatically fetch fresh data when mounted on the initial page load. This is unnecessary after SSR as the hydrated cache can be assumed to be fresh.

While harmless, and in some cases useful (if data becomes stale in the time it takes the page to load), it would be nice to work out how to prevent this to reduce the burden on servers and reduce client network traffic.

[jaydenseric]

You’re just describing the original issue.

I’ve had an idea though.

As a standalone context and hook (could even be published separately), there could be a context called something like IsFirstMount that starts true, then in a hook via useEffect updates to false. I’m don’t think it needs to be state, as when it changes we don’t want to trigger the app to re-render. This context and hook needs to be used at the top app level, above any route components; otherwise loadOnMount won’t work when navigating back and forth between routes.

I’m pretty sure child components mount before their parents do, so if they read from the IsFirstMount context they can tell if it’s the first mount or not. Our useGraphQL hook could try to read the IsFirstMount context, and if it exists, and is true, and there is cache available for the query, decide to bail on loading on mount.

[jaydenseric]

Published in v8.2.0 🚀