Gatsby: Expose an API for manually triggering prefetching for a pathname

[schalkventer]

Summary

Currently there is no way to programmatically trigger the prefetching done for a pathname when the <Link> component is mounted.

Basic example

const fireEvent = () => {
  const id = createNewPerson();
  navigate(`/person?id=${id}`);
}

<button onClick={fireEvent}>Create Person</button>

Motivation

Developers might want to leverage prefetching when programmatically triggering navigate.

[kakadiadarpan]

@schalkventer Currently, if anyone hovers over a Link component, the resources required for that path are prefetched by default.

@pieh @m-allanson @KyleAMathews any suggestions to leverage prefetching for programmatic navigation?

[KyleAMathews]

This seems pretty reasonable to me.

The API would be something like:

import { prefetchPathname } from "gatsby"

prefetchPathname(`/about/`)

[schalkventer]

@KyleAMathews, if it is as straightforward as the above it seems like a good solution. 👍

For the sake of clarity, what is the baseline behaviour for preloading via Link? Is it as indicated above only once you hover over the link, or is it on the rendering of the view that contains the link?

[KyleAMathews]

It's when the link appears in the viewport. We leverage https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API for this.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[schalkventer]

Has this been implemented in Gatsby 2? I.e. can it be closed?

[devrchancay]

@schalkventer I would think that if it can be closed.

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.

[schalkventer]

@KyleAMathews Is this something that is still being worked on? Can it be re-opened, since as far as I know it's not resolved yet?

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[KyleAMathews]

Would love a PR from you for this? Is this something you'd like to work on in the near future? I can provide some hints on how to do it.

[schalkventer]

@KyleAMathews For sure!

Do you have any suggestions where I can start looking to find this mechanism in the code?

[KyleAMathews]

Great!

The entry module for the browser for gatsby is https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/gatsby-browser-entry.js so that's where prefetchPathname should be exported from.

The function which does the prefetching is enqueue in loader.js https://github.com/gatsbyjs/gatsby/blob/0124389f81df542cd0c22fa68fbe980cb04b0120/packages/gatsby/cache-dir/loader.js#L223

Then you can just import that directly into gatsby-browser-entry.js and then reexport it as prefetchPathname

[schalkventer]

Awesome! Thank @KyleAMathews 🙏.

Will have a look!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[schalkventer]

@KyleAMathews Can you re-open this issue and assign it to me?

[KyleAMathews]

Done!

[thelovesmith]

Hello good morning!
I keep getting this warning in development due to 'prefetchPathname":
warning in ./.cache/gatsby-browser-entry.js ⠀ "export 'enqueue' (reexported as 'prefetchPathname') was not found in './loader'

Wanted to know what is going on here and any solutions to get rid of this warning?

[wardpeet]

we got this fixed in gatsby version 2.13.24

[thelovesmith]

hmm I appreciate you responding so quickly, but i literally just updated to version 2.13.25
after i saw your reply and then my the dev server just crashed. lol def was working before. I know now this is a separate issue lol I'll try and find a solution elsewhere thanks
`
There was a problem loading the local develop command. Gatsby may not be installed. Perhaps you need to run "npm install"? Cannot find module 'gatsby-cli/lib/reporter'
Require stack:

• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/redux/actions/public.js
• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/redux/actions/index.js
• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/utils/webpack.config.js
• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/commands/develop.js
• /usr/local/lib/node_modules/gatsby-cli/lib/create-cli.js
• /usr/local/lib/node_modules/gatsby-cli/lib/index.js

Error: Cannot find module 'gatsby-cli/lib/reporter'
Require stack:

• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/redux/actions/public.js
• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/redux/actions/index.js
• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/utils/webpack.config.js
• /mnt/c/Users/PARFunding/Desktop/AHinds/gatsby-site/node_modules/gatsby/dist/commands/develop.js
• /usr/local/lib/node_modules/gatsby-cli/lib/create-cli.js
• /usr/local/lib/node_modules/gatsby-cli/lib/index.js

`

[wardpeet]

I would try reinstalling. Lookz like some deps are missing