1. 문제 발생

prisma 를 처음 사용하면서 아래의 하트를 누르면 좋아요를 토글하는 기능을 만들었다.

하지만 아래와 같은 에러가 발생하면서 문제가 생겼다.

prisma 는 실제로 에러가 발생하면 에러가 발생한 원인을 출력해준다고 했지만

브라우저의 콘솔에서는 위와 같은 메시지만 반복해서 나왔고 vscode의 터미널에서도 아래의 메시지만 계속해서 출력됐다.

TypeError: The "payload" argument must be of type object. Received null

개발자도구를 확인해보니 GET요청은 갔지만 도착한 답은 에러였다.

결국 잘못된 쿼리가 있는지 코드 자체를 잘못 적었는지, 전달되는 props가 잘못됐는지 계속 찾아봤지만 알 수 없었다 ㅠㅠ 그래서 결국 구글신에 도움을 요청했다.

2. 문제 원인

https://www.reddit.com/r/nextjs/comments/1gkxdqe/typeerror_the_payload_argument_must_be_of_type/

나랑 같은 에러가 발생한 3개월 전 글인데...

사실 이 에러 코드에 관한 질문글이 몇 개 있었는데 놀랍게도 전부 3개월 이내의 최신 글이었고, 원인이 다양했다.

1. catch 문에 console.log() 를 사용했더니 발생
2. 데이터베이스 레코드에 이미 있는 속성을 추가로 추가하면서 발생
3. 단순히 잘못된 쿼리 작성

위의 링크를 읽어보니 Next와 prisma의 호환 문제일 수 있고, 14버전으로 다운그레이드 하면 동작할 것이라고 한다. 사실 해당 글에서도 단순히 다운그레이드는 좋은 방법이 아니라고 했지만...

가장 많이 좋아요를 받은 코멘트에서도 Next의 문제라고 하니 다른 방법을 찾을 수 없었기에 다운그레이드 할 수 밖에 없었다.

그래서 14버전으로 다운그레이드를 진행했고 다시 동작시켜보았다.

나의 경우에는 다운그레이드를 했다고 안되던게 되진 않았다.

그런데 vscode 터미널에 에러의 원인이 출력되기 시작했다.

그리고 아래의 에러 메시지가 더 이상 출력되지 않았다.

정말 단순히 Next 나 prisma 의 문제인가;;

어쨌든 userId에 number형식이 가야하는데 string이 갔다;

3. 문제 해결

원래 코드는 기존 name, email, image만 가지고 있는 session 의 타입에 id를 추가해주었다.

그래서 위와 같이 authOptions의 callbacks 에 id 속성을 추가하기 위한 로직을 작성했다.

하지만 token.sub가 string 이었다 ㅠㅠ

그래서 위와 같이 id를 string으로 바꾸고, 좋아요 토글 api에 string으로 전달되는 id를 int 로 바꿔준다.

다행히 잘 동작하게 됐다.