[React] NextJs query param 값 가져오기 .with useQuery

 

상품 상세 페이지에서 상품 아이디를 query param 값으로 서버에 해당 상품을 요청해야 하는 기능을 구현하였다.

 

query param값을 가져오는건 굉장히 간단했지만,   처음 렌더링될때 query param 값이 undefind여서 API호출을 할때 오류가 났었다.

param값이 있을때에만 API호출을 할수있는 방법을 고민했다.

 

이전 포스팅에서 버튼을 누를때만 요청을 보낼수있게 코드를 구현한것이있다. useQuery 옵션에 refetch를 사용하였는데

코드가 불필요하게 길어지는것같아서 useQuery의 enabled옵션을 건드려보기로 했다.

 

먼저 query param값을 useRouter를 사용해서 가져오도록 하자.

 

useRouter 사용

useRouter를 import 해주고 사용해주면된다.

router.query에는 query param이 객체 형식으로 담겨있기때문에 지정해놓은 query param을 productId대신 넣어주면된다.

 

ex) 폴더구조가 product/[userName] 일때 useRouter().query를 console.log로 찍어보면

{userName:"유저이름"} 이런식으로 객체에 담긴다.

// product/[productId]/index.tsx
import { useRouter } from 'next/router';

const router = useRouter();
const { productId } = router.query;

이렇게 상품아이디로 가져온후 API 요청을 보내면 에러가 나온다.

undefined가 찍히는데 router.query를 받아오기전에 API요청을 보내서 그런 것 같다.

이를 해결하기 위해 useQuery의 enabled옵션을 사용해보자.

 

useQuery 사용

useProduct는 커스텀훅이다.

useQuery에서 productId값이 있을때만 호출을 하는 코드이다. 있을때만 enbled를 true로 하여 요청을 하게한다.

import { useQuery } from '@tanstack/react-query';
import { fetchProduct } from '../../api/fetchProduct';

export const useProduct = (productId: string | string[] | undefined) => {
  return useQuery(['product', productId], () => fetchProduct(productId), {
  	// productId가 있으면 true로 요청을하고 undefined거나 없으면 false로 요청을 하지않는다.
    enabled: !!productId,
  });
};

 

useRouter와 useQuery사용

전반적인 코드는 아래와 같을 것이다.

// useProduct를 사용하는 컴포넌트  
  const router = useRouter();
  const { productId } = router.query;
  const { data } = useProduct(productId);
  

// useProduct.ts
export const useProduct = (productId: string | string[] | undefined) => {
  return useQuery(['product', productId], () => fetchProduct(productId), {
    enabled: !!productId,
  });
};