fix: enable ref forwarding with forwardRef

docs/docs/gatsby-link.md

@@ -20,7 +20,7 @@ Preloading is triggered by a link entering the viewport; Gatsby uses
 `Link`'s `innerRef` property to create a new IntersectionObserver (on
 supported browsers) to monitor visible links. This way, Gatsby only prefetches
 code/data chunks for pages the user is likely to navigate to. You can also get
-access to the link element by passing in a `innerRef` prop.
+access to the link element by passing in a `ref` prop, which will be forwarded to the `@reach/router` `Link` element directly.
 
 ## How to use
 
@@ -39,7 +39,7 @@ class Page extends React.Component {
           activeStyle={{
             color: "red",
           }}
-          innerRef={el => {
+          ref={el => {
             this.myLink = el
           }}
           state={{

packages/gatsby-link/package.json

@@ -26,7 +26,8 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": ">2.0.0-alpha"
+    "gatsby": ">2.0.0",
+    "react": ">=16.3"
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-link",
   "scripts": {

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

@@ -147,3 +147,21 @@ describe(`navigate`, () => {
     )
   })
 })
+
+describe(`ref forwarding`, () => {
+  it(`forwards ref`, () => {
+    const ref = jest.fn()
+    setup({ linkProps: { ref } })
+
+    expect(ref).toHaveBeenCalledTimes(1)
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLElement))
+  })
+
+  it(`remains backwards compatible with innerRef`, () => {
+    const innerRef = jest.fn()
+    setup({ linkProps: { innerRef } })
+
+    expect(innerRef).toHaveBeenCalledTimes(1)
+    expect(innerRef).toHaveBeenCalledWith(expect.any(HTMLElement))
+  })
+})

packages/gatsby-link/src/index.js

@@ -38,7 +38,7 @@ const handleIntersection = (el, cb) => {
 
 class GatsbyLink extends React.Component {
   constructor(props) {
-    super()
+    super(props)
     // Default to no support for IntersectionObserver
     let IOSupported = false
     if (typeof window !== `undefined` && window.IntersectionObserver) {
@@ -97,7 +97,6 @@ class GatsbyLink extends React.Component {
       /* eslint-disable no-unused-vars */
       activeClassName: $activeClassName,
       activeStyle: $activeStyle,
-      ref: $ref,
       innerRef: $innerRef,
       state,
       replace,
@@ -154,7 +153,9 @@ GatsbyLink.propTypes = {
   replace: PropTypes.bool,
 }
 
-export default GatsbyLink
+export default React.forwardRef((props, ref) => (
+  <GatsbyLink innerRef={ref} {...props} />
+))
 
 export const navigate = (to, options) => {
   window.___navigate(withPrefix(to), options)