[TS] Link is incompatible with React.forwardRef due to ref type mismatch

[aaronadamsCA]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

In a TypeScript environment, Gatsby' Link component is not compatible with React.forwardRef due to a ref type mismatch.

Reproduction Link

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnmApnA3nA4gQxgZwCNEAZYAOwGsAFKCMfOAXzgDM6Q4AiAczyMRcA3AChQkWBjhkqzNh258CxYWPDR4AJRQ4AxjAA0U1tADuOKABNtrOewicuUHftUiUADwnwkqOAFlSCho6BjgAXmx+YhkQ+nwAHgBXKnIIU3IAPlF3Lw04XQhyfHhA2Ii2MwtrFFYEgAkAFX8SAEFyXQALaABRABsUEBRyQwCgqlp4zIAKETg2FP1gIrHY6bBQ-CNnVgBKDDn5uGcYJKhyOATy9AA6O434lh3w9B2WPRhgADcUAGE+nD4fAAORwQ3CXA+3xQXDgAHpsocmCJdkIgA

Steps to Reproduce

Run this code:

import type { GatsbyLinkProps } from "gatsby";
import { Link } from "gatsby";
import React, { forwardRef } from "react";

export type MyLinkProps = GatsbyLinkProps<unknown>;

export const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>(
  function MyLink(props, ref) {
    return <Link {...props} ref={ref} activeClassName="active" />;
  }
);

Expected Result

Works normally.

Actual Result

TypeScript complains about a type mismatch on ref={ref}:

No overload matches this call.
  Overload 1 of 2, '(props: GatsbyLinkProps<unknown> | Readonly<GatsbyLinkProps<unknown>>): GatsbyLink<unknown>', gave the following error.
    Type 'ForwardedRef<HTMLAnchorElement>' is not assignable to type '((string | ((instance: GatsbyLink<unknown> | null) => void) | RefObject<GatsbyLink<unknown>>) & (string | ((instance: HTMLAnchorElement | null) => void) | RefObject<...>)) | null | undefined'.
      Type '(instance: HTMLAnchorElement | null) => void' is not assignable to type '((string | ((instance: GatsbyLink<unknown> | null) => void) | RefObject<GatsbyLink<unknown>>) & (string | ((instance: HTMLAnchorElement | null) => void) | RefObject<...>)) | null | undefined'.
        Type '(instance: HTMLAnchorElement | null) => void' is not assignable to type 'string & ((instance: HTMLAnchorElement | null) => void)'.
          Type '(instance: HTMLAnchorElement | null) => void' is not assignable to type 'string'.
  Overload 2 of 2, '(props: GatsbyLinkProps<unknown>, context: any): GatsbyLink<unknown>', gave the following error.
    Type 'ForwardedRef<HTMLAnchorElement>' is not assignable to type '((string | ((instance: GatsbyLink<unknown> | null) => void) | RefObject<GatsbyLink<unknown>>) & (string | ((instance: HTMLAnchorElement | null) => void) | RefObject<...>)) | null | undefined'.

My workaround to date depends on stripping ref from GatsbyLinkProps, and then passing my forwarded ref to deprecated prop innerRef, like so:

import type { GatsbyLinkProps } from "gatsby";
import { Link } from "gatsby";
import React, { forwardRef } from "react";

export type MyLinkProps = Omit<GatsbyLinkProps<unknown>, "ref">;

export const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>(
  function MyLink(props, ref) {
    return <Link {...props} innerRef={ref} activeClassName="active" />;
  }
);

But this wasn't much fun to figure out, nor should it be necessary. Gatsby's Link should be directly compatible with forwardRef out of the box.

Among other things, this would make it possible to pass component={Link} when using MUI. MUI is a (the?) leading React front end framework, and improving compatibility here would be a big plus.

Environment

Gatsby 4.4.0.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[aaronadamsCA]

Not stale.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[aaronadamsCA]

Not stale.

[bourn404]

Hopefully this can be addressed as part of PR #22027, though there hasn't been much progress there.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[aaronadamsCA]

Still not stale!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[aaronadamsCA]

👻

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[aaronadamsCA]

Not stale.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[aaronadamsCA]

😐

[HashimMufti]

+1

[NitsanCohen770]

++

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[LucidCarson]

Not stale

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[github-actions[bot]]

Hey again!

It’s been 60 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 comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

[tordans]

@github-actions this is not stale. Current WIP PR by @Kornil is at https://github.com/gatsbyjs/gatsby/pull/37543 (Thanks Kornil!).

[icefee]

any update? I face same problem

[paolooo]

same here

[wg4568]

Still running into this issue