rtk-query에서 쿼리를 수동으로 호출하기

지속가능한개발·2023년 2월 13일
0

고민한것

목록 보기
5/7
post-thumbnail

1.고민한것

rtk-query에서 일반적인 useQuery를 사용하면
컴포넌트가 생기면서 받은 변수에 따라 쿼리가 자동으로 요청된다.

이 hook으로 어떤 버튼을 클릭했을때 쿼리가 동작하게 하려면
먼저 쿼리는 컴포넌트가 생기면 무조건 동작하니까 skip 조건을 주고
skip이 false가 되면 쿼리를 동작시키고
동작한뒤에는 useEffect로 skip을 true로 set해줄수도 있을것이다.
근데 이런식으로 쓰는것은 컴포넌트가 꼬이기쉽고 개발자경험도 안좋다.

skip을 통해 conditional fetching을 받을수도 있지만
수동호출할때는 어떻게 해야할까?

2.해결방법


이런상황을 위해서 rtk-query에서는 useLazyQuery를 만들어놓았다
첫번째는 trigger인데 여기 매개변수를 전달해주면 되고
두번째 데이터로 값을 받거나 trigger의 결과값을 받을수도 있다.

3.실제 사용예


export할때 lazy라는 이름으로 자동완성이 뜨는데 이걸로 해준뒤


사용할 컴포넌트에서는 이런식으로 hook을 가져온뒤

hook에서 받은 배열의 두번째값 에서도 api의 응답에 접근할 수 있고
onClick등 수동으로 쿼리를 불러와야 할곳에서 이렇게 사용하면 된다

참고자료

https://redux-toolkit.js.org/rtk-query/api/created-api/hooks#uselazyquery

https://stackoverflow.com/questions/74463088/how-to-call-redux-toolkit-query-manually-on-button-click

profile
좋은 프로그램을 만들 수 있는 사람이 되기 위해 꾸준히 노력합니다

0개의 댓글