在 onClick 中使用解构的 useMutation function 时，Apollo 反应 typescript 错误

Question

I was trying out the Odyssey Lift-Off IV ( useMutation Hook ) tutorial using typescript and I can't seem to update a Track's views by Id using the onClick event handler. In the JavaScript version on the Odyssey website, they called the incrementTrackViews like this:

onClick={incrementTrackViews}

I can't do the same because I'm using TypeScript, so it throws the following error:

(JSX attribute) onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined

Type '(options?: MutationFunctionOptions<any, { incrementTrackViewsId: string; }> |
undefined) => Promise<FetchResult<any, Record<string, any>, Record<string, any>>>' is 
not assignable to type 'MouseEventHandler<HTMLAnchorElement>'. Types of parameters
'options' and 'event' are incompatible. Type 'MouseEvent<HTMLAnchorElement, MouseEvent>'
has no properties in common with type 'MutationFunctionOptions<any, { 
incrementTrackViewsId: string; }>'.ts(2322)

index.d.ts(1463, 9): The expected type comes from property 'onClick' which is declared
here on type 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & Pick<LinkProps<unknown>, 
"slot" | "style" | "title" | "key" | "download" | ... 263 more ... | "innerRef"> & 
RefAttributes<...> & { ...; } & { ...; }'

So, I used a callback function to get rid of the error:

onClick={() => incrementTrackViews}

Unfortunately, the Track Views will not update. Here's my code:

import { gql, useMutation } from "@apollo/client";
import styled from "@emotion/styled";
import { Link } from "@reach/router";
import React from "react";
import { Track as TrackInterface } from "../components/track-detail";
import { colors, mq } from "../styles";
import { humanReadableTimeFromSeconds } from "../utils/helpers";

/**
 * Mutation to increment a track's number of views
 * (exported for tests)
 */
export const INCREMENT_TRACK_VIEWS = gql`
  mutation IncrementTrackViewsMutation($incrementTrackViewsId: ID!) {
    incrementTrackViews(id: $incrementTrackViewsId) {
      code
      success
      message
      track {
        id
        numberOfViews
      }
    }
  }
`;

export interface Track {
  id: string;
  title: string;
  author: Author;
  thumbnail: string;
  length: number;
  modulesCount: number;
  description: string;
  numberOfViews: number;
  modules: Module[];
}

interface TrackCardProps {
  track: Track;
}

/**
 * Track Card component renders basic info in a card format
 * for each track populating the tracks grid homepage.
 */
const TrackCard = ({ track }: TrackCardProps) => {
  const { id, title, thumbnail, author, length, modulesCount } = track;

  const [incrementTrackViews] = useMutation(INCREMENT_TRACK_VIEWS, {
    variables: { incrementTrackViewsId: id },
    // to observe what the mutation response returns
    onCompleted: (data) => {
      console.log(data);
    },
  });

  return (
    <CardContainer to={`/track/${id}`} onClick={() => incrementTrackViews}>
      <CardContent>
        <CardImageContainer>
          <CardImage src={thumbnail} alt={title} />
        </CardImageContainer>
        <CardBody>
          <CardTitle>{title || ""}</CardTitle>
          <CardFooter>
            <AuthorImage src={author.photo} />
            <AuthorAndTrack>
              <AuthorName>{author.name}</AuthorName>
              <TrackLength>
                {modulesCount} modules - {humanReadableTimeFromSeconds(length)}
              </TrackLength>
            </AuthorAndTrack>
          </CardFooter>
        </CardBody>
      </CardContent>
    </CardContainer>
  );
};

export default TrackCard;

Answer 1

The onClick={() => incrementTrackViews} return a function instead of actually calling your function

try this

onClick={() => {
          incrementTrackViews();
}

Answer 2

With onClick={() => incrementTrackViews} , you are returning the function itself, not the result of the function (void or otherwise).

To execute the function, you need to call it with () like so:

onClick={() => incrementTrackViews()}

If you don't need to pass any data, you can even shorten this more and just call: onClick={incrementTrackViews} , this tells React that onclick, execute this function as is.

If TS still isn't happy, you can add brackets and omit a return statement, this will execute the function but not return anything, which might be what TS is looking for in this case.

onClick={() => {
          incrementTrackViews();
}