import PropTypes from 'prop-types'
import Link from 'next/link'
import Router from 'next/router'
import { execOnce, warn } from 'next/dist/lib/utils'
import exact from 'prop-types-exact'
import { format, resolve, parse } from 'url'
export const prefetch = async href => {
// if we're running server side do nothing
if (typeof window === 'undefined') return
const url = typeof href !== 'string' ? format(href) : href
const parsedHref = resolve(window.location.pathname, url)
const { query, pathname } = typeof href !== 'string' ? href : parse(url, true)
const Component = await Router.prefetch(parsedHref)
// if Component exists and has getInitialProps
// fetch the component props (the component should save it in cache)
if (Component && Component.getInitialProps) {
const ctx = { pathname, query, isVirtualCall: true }
await Component.getInitialProps(ctx)
}
}
// extend default next/link to customize the prefetch behaviour
export default class LinkWithData extends Link {
// re defined Link propTypes to add `withData`
static propTypes = exact({
href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
as: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
prefetch: PropTypes.bool,
replace: PropTypes.bool,
shallow: PropTypes.bool,
passHref: PropTypes.bool,
scroll: PropTypes.bool,
children: PropTypes.oneOfType([
PropTypes.element,
(props, propName) => {
const value = props[propName]
if (typeof value === 'string') {
execOnce(warn)(
`Warning: You're using a string directly inside . This usage has been deprecated. Please add an tag as child of `
)
}
return null
}
]).isRequired,
withData: PropTypes.bool // our custom prop
})
// our custom prefetch method
async prefetch () {
// if the prefetch prop is not defined do nothing
if (!this.props.prefetch) return
// if withData prop is defined
// prefetch with data
// otherwise just prefetch the page
if (this.props.withData) {
prefetch(this.props.href)
} else {
super.prefetch()
}
}
}