Failed to execute 'json' on 'Response': body stream already read

개요

리액트 쿼리 사용중 위의 오류가 발생되었다.
분명 route handlers에서 데이터는 잘 넘어오는데 계속 오류가 발생하였다.

생각해본 의문점들

1. Route Handlers 문제인가?

// api/profile/[id]/camp/like
import { supabase } from '@/app/api/db';
import { NextRequest, NextResponse } from 'next/server';

export const GET = async (
  _: NextRequest,
  { params }: { params: { id: string } },
) => {
  const { data, error } = await supabase
    .from('like')
    .select(
      'user_id, camp(id, name, address, camp_pic(id, photo_url), camp_area(id, price))',
    )
    .eq('user_id', params.id as string);

  if (error) throw new Error(error.message);
  console.log(data);

  return NextResponse.json(data);
};

콘솔로 찍어보니 데이터는 정확하게 잘 받아옴

2. React-Query의 Query function 문제인가?

import { LikeCampType } from '@/types/profile';

export const getUserLikeCamp = async (userId: string): Promise<LikeCampType[]> => {
  const res = await fetch(`/api/profile/${userId}/like/camp`, {
    method: 'GET',
  });

  console.log('res=============', await res.json());

  const fetchData = await res.json();
  return fetchData;
};

여기서 json을 사용하고 있으니 문제가 여기서 발생했을 것이라고 예상했음
콘솔을 지우고 res.json()을 한번만 사용하니 문제가 해결되었음