11.4 Product Detail

상품 상세화면 구현하기

1. qeury string으로 id 얻기

const { query } = useRouter(); // { id: '1'}

query 는 초기에 { } 이기 떄문에 조건문을 통해서 query 를 사용한다. 이것을 optional query 라고 한다. server에서는 client에서 보내는 query string을 조회할 때, request.query를 통해 가능하다. 마찬가치로 초기값이 { } 이다. request.query.id는 string 또는 string[] 타입이기때문에 타입을 일치해서 사용하고자 할 때는 id.toString() 을 통해 사용한다.

request.qeury.id가 string | string[]인 이유는 url 에 id가 여러개 붙어 있을 수 있기 떄문이다. 참고로 여러개의 query string을 한번에 조회하고자 할 때는 [...id].ts 파일을 생성하면 query string을 배열로 받을 수 있다.

2. db에서 특정 id의 row 조회하기

const product = await client.product.findUnique({
  where : {
    id: +id.toString(),
  },
  include: {
    user: true, // product 안에 user의 정보를 추가 할 수 있음. db table 사이에 relation이 되어 있어야 가능 
  }
})

// {ok: true, product : {...} }

db에서 특정 아이디 값을 통해 해당 아이디의 값 row만 가져올 때는 client.findUnique({where: {id }})를 통해 조회할 수 있다. 또한 select를 이용해서 relation 되어 있는 정보에서 일부만 가져오는 것도 가능하다.

const product = await client.product.findUnique({
  where: {
    id: +id.toString(),
  },
  include: {
    user: {
      // user의 id와 name만 조회할 수 있음
      select : {
      	id: true, 
	    name: true,
        avatart: true,
      }
    }
  }
})