0. Intro

일하면서 GraphQL 쿼리를 만지작거리다가 아래와 같은 에러를 마주쳤다.

이 에러는 아래와 같은 상황에서 발생했다.

const { data, loading, error, refetch } = useSomeQuery()

...

return (
  <div className={'my-class'} onClick={refetch}>
    ...
  </div>
)

여기서 my-class 컴포넌트를 클릭하면 상기 에러가 발생한다.

1. 이왜안?

위 코드에서 알 수 있듯이 useSomeQuery는 쿼리 패러미터로 아무것도 받지 않는다. 그래서 refetch 함수는 그냥 refetch()처럼 호출해주면 되기 때문에 아무 문제가 없는 것 처럼 느껴진다.

근데 그건 우리 (아니면 나만의?) 생각이다. React DOM의 이벤트 핸들러는 첫 번째 인자로 항상 Event 객체를 던져준다. 예를 들어 onClick props의 시그니처는 아래와 같다.

React.DOMAttributes<T>.onClick?: (event: MouseEvent<T, globalThis.MouseEvent>) => void

그러니까 onClick={refetch}처럼 넘기면 refetch 함수의 첫 번째 인자로 뜬금없이 리액트 이벤트를 던져버리는 셈이 된다. 그리고 refetch 함수는 첫 번째 인자로 쿼리 패러미터 variables를 받는다. 여기서 문제가 터지는 것이다.

이를 방지하기 위해서는 그냥 익명함수 하나 만들어서 넘겨주면 된다.

return (
  <div className={'my-class'} onClick={() => refetch()}>
    ...
  </div>
)

2. 이딴 에러를 왜냄?ㅋㅋ 님 능지 떨어짐?

넹 ㅠ