👨‍💻 사건

MySQL 데이터를 Prisma 로 마이그레이션을 하고, 해당 Prisma 에 접근을 하였다.
접근까지는 성공적이였다. 그후, 나는 컬럼명을 누르면 해당 컬럼명의 오름차순으로 정렬하고싶었다.

그러나, 공식문서에서의 Fetch 의 옵션은 데이터캐시처리 부분말고는 주어진것이 없었다.

여기서 내가 처음 시도해본것은 Fetch 의 url 에 query 문을 추가하여 작성한 것이다.

const fetchData = await fetch('/api/player?column=CA&order=desc');

그후, next 12 버전에서 썼던 handler 방식처럼 req의 쿼리를 들고오려고 하였다.

if (req.query.column === 'CA' && req.query.order === 'desc') {
  const users = await client.playerInfo.findMany({
    take: 20,
    orderBy: {
      CA: 'desc',
    },
  });

  return NextResponse.json(users);
}

될줄알았으나, 보기좋게 안되는것을 확인하였다.

✅ 해결

❗️ URL method 사용

구글링을 통해 알게된 방법이다.

req의 url 을 new URL 로 객체변환하여 사용하는 방식이다.

export async function GET(req: NextApiRequest, res: NextApiResponse) {
  // req.url이 undefined일 수 있기 때문에 
  if (!req.url) {
    return res.status(400).send('URL not provided');
  }
  const baseUrl = `http://${req.headers.host}`;

  // 객체 변환
  const url = new URL(req.url, baseUrl);
  // column의 값을 받아옴
  const column = url.searchParams.get('column');
  // order의 값을 받아옴
  const order = url.searchParams.get('order');

💭 개선

• 컬럼명에 맞는 분기처리를 더 추가할 예정이다.