Programmatically prefetching with Gatsby

Viewed 109

I am navigating programmatically in Gatsby like so:

navigate(nextRoute?.url || '/', { replace: true });

The nextRoute is determined on mount. This works. However, I want this to function like the standard Link component, which uses preloading, as described:

Preloading is used to prefetch page resources so that the resources are available by the time the user navigates to the page

I've seen hacks around this, which don't seem to work for me, along with mysterious stirrings of so-called "undocumented" functions. I've even tried the brutish solution of just highjacking the Link and invoking it with fudged MouseEvents. All this seems a bit arcane to me, I just want to leverage the preloading API without having to rely on the Link component, does anyone have any ideas?

1 Answers

Consider using <Link> with the to prop equal to a variable in your component state that is changed when your component mounts (either through setState in componentDidMount or the hook equivalent).

Related