[최종프로젝트] 매개변수 받고 작동하는 쿼리 (enabled)

문제 

(뮤직플레이어 컴포넌트)

회원 아이디가 최초 로딩 시 빈값으로 나오기 때문에 쿼리가 빈값인 상태로 아이디를 받아서 api를 작동시키기기 때문에 

데이터를 못불러왔다

---

쿼리에 아이디값이 있는 경우 api를 작동시키는 방식 2가지를 배움

 

1. enabled에 회원 아이디가 빈값이 아닌 경우 api를 작동해라, 조건부로 쿼리를 작동시키는 방법

 

2. 쿼리키에 아이디를 넣어주면 쿼리함수가 이 아이디를 인자로 받아서 api에 넘겨준다

쿼리함수에 인자는 왜 객체형식이냐. 객체 없애고 arg만 넣어서 쿼리에 아이디 진입확인 콘솔에 찍어보면 알 수 있다.

객체형태에 쿼리키가 배열로 들어있기 때문임

쿼리키로 받은 매개변수로 받을 때 구조분해할당으로 쿼리키 뽑은 다음, 쿼리키가 2개니까 함수명, 아이디 아이디 인덱스번호 넣어주면 끝.

여기서 중요한 포인트
아이디가 최초 로딩 시 바로 받아오는 게 아니기 때문에 동적으로 작동하도록 한 것.

동적으로 변하는 값을 받기 위해 쿼리 키로 쿼리 펑션에 인자로 넘겨주어 실행한다

클로저를 생각할것

 

 

아래 코드 각각 콘솔로 확인하면 이해가 빠르다

  const { data } = useQuery({
    queryFn: ({ queryKey }) => {
      console.log('쿼리키 확인', queryKey)
      console.log('쿼리에 아이디 진입 확인', queryKey[1])
      return getCurrentMusicList(queryKey[1])
    },
    queryKey: ['getCurrentMusicList', uid],
  })
  
  
  const { data } = useQuery({
    queryFn: () => getCurrentMusicList,
    queryKey: ["getCurrentMusicList", uid],
    enabled: uid !== "",
  });

 // 쿼리내부에 유즈이펙이 있을 수 있다 나중에 확인해 볼 것
// 유즈이펙처럼 리턴을 먼저 그린 후 작동함