chore: avoid to prefetch docs links (#1731)

* chore: avoid to prefetch docs links

* chore: disable prefetch for mobile

Author: Kikobeats

src/components/hook/use-breakpoint.js

@@ -5,7 +5,7 @@ import { useWindowSize } from './use-window-size'
 
 const rawBreakpoints = breakpoints.map(toRaw)
 
-export function useBreakpoint (mediaBreakpoints) {
+export function useBreakpoint (mediaBreakpoints = [0, 1, 2, 3]) {
   const { width } = useWindowSize()
 
   const index = useMemo(() => {

src/components/patterns/Layout.js

@@ -31,7 +31,7 @@ const Layout = ({
   component = Box,
   ...props
 }) => {
-  const breakpoint = useBreakpoint([0, 1, 2, 3])
+  const breakpoint = useBreakpoint()
   const toolbarHeight = TOOLBAR_HEIGHTS[breakpoint]
 
   useEffect(() => {

src/helpers/hoc/with-link.js

@@ -1,5 +1,6 @@
 /* global IntersectionObserver */
 
+import { useBreakpoint } from '../../components/hook/use-breakpoint'
 import { ArrowUpRight as ExternalIcon } from 'react-feather'
 import React, { useRef, useState, useEffect } from 'react'
 import { useLocation } from '@gatsbyjs/reach-router'
@@ -134,7 +135,14 @@ export const withLink = Component => {
       return { className: 'active' }
     }
 
-    if (prefetch && (!href || isInternal)) {
+    const isPrefetch =
+      useBreakpoint() > 1 &&
+      prefetch &&
+      href !== '/' &&
+      !href.startsWith('/docs') &&
+      (!href || isInternal)
+
+    if (isPrefetch) {
       return (
         <Component {...props}>
           <PrefetchLink