Programmatically prefetching

[ThewBear]

Summary

Currently gatsby-link prefetch route on Link component componentDidMount.

gatsby/packages/gatsby-link/src/index.js

Lines 74 to 79 in 762506f

	componentDidMount() {
	// Preserve non IO functionality if no support
	if (!this.state.IOSupported) {
	___loader.enqueue(parsePath(this.props.to).pathname)
	}
	}

It would be great if we also support some kind of prefetch for navigate function or a new programmatically prefetch page function. My current solution is using window.___loader.enqueue which is technically unsupported.

gatsby/docs/docs/production-app.md

Line 120 in 6f3eb97

Gatsby attaches global state to the `window` object via `window.___somevar` variables so they can be used by plugins (though this is technically unsupported). Here are a few:

[karlhorky]

Super interesting @ThewBear!

I would also have a use case for it, from #20745. "These solutions" is talking about access control - denying access per-user and per-page on an Express static file server, which will cause failed requests with pre-fetching.

One thing that these solutions cause is a lot of failed pre-fetching requests for users without full access:

Maybe there could be a way to configure pre-fetching client-side? So that different resources could be pre-fetched per user?

[karlhorky]

My current solution is using window.___loader.enqueue which is technically unsupported.

@ThewBear Could you share your current solution with us?

I may use it in the interim to work around the failed requests in my proof of concept Gatsby + server-side Auth0 + Express repo: https://github.com/karlhorky/gatsby-serverside-auth0

[ThewBear]

@karlhorky I call window.___loader.enqueue inside useEffect hooks in Page component.

import React, { useEffect } from "react";
import { navigate } from "gatsby";

const Page1 = () => {
  useEffect(() => {
    /* global ___loader */
    ___loader.enqueue("/page-2");
  }, []);

  return <button onClick={() => navigate("/page-2")}></button>
}

gatsby-link also implements this.

gatsby/packages/gatsby-link/src/index.js

Line 70 in 721e9d1

___loader.enqueue(parsePath(this.props.to).pathname)

[karlhorky]

Ah interesting. I guess a new Gatsby <Link /> component could be created with a prefetch prop, to control this behavior:

<Link prefetch={isAllowed(user, page)} />

I'll have to see whether this is useful enough for us. If so, maybe I'll implement + publish this too.

[karlhorky]

Not sure why not stale was removed @LekoArts, this is still a valid issue.

[erpatterson11]

This is something that Next.js implements and would be really helpful to have in Gatsby.

[wahidshafique]

Well, its been over a year, are there still plans for some sort of programmatic prefetch like

router.prefetch(url, as)