react query 좋은 코드?? 구현하는 법

Question

react query로 채팅목록을 구현중입니다.

질문하고 답변이 오면 답변을 가공해서 recoil에 저장을하고 화면에 렌더링합니다.
이때 가공해야할것이 많고 오는 답변에 따라서 처리도 다 제각각이라 react query를 사용하는 부분이 코드가 매우 지저분합니다.

예를 들면 아래와 같이 되어있습니다.

useSend = () => {
// 각종 react query hook 선언
// recoil 상태값 선언
// recoil hook (각종 데이터 변형 처리)
return useMutation( api 함수 호출, 
{onMutate: () => {
api 호출하기전에 처리
}, 
onSuccess: () => {
api 성공시 처리
응답으로 온 data를 렌더링 처리를 위해 각 구성을 달리해서 recoil에 저장하기도하고 (데이터 저장하는 hook도 따로 있음)
응답으로 온 data값에따라 또 다른 react query hook을 호출하기도 합니다.
})

이렇게 react query를 날리는 hook은 따로 만들었으나 이 안에서 하는일이 너무 많습니다.
react query를 사용하는 코드들을 몇개 검토해보았는데.. 죄다 setquerydata로 저장을하고 그럼 useQuery에서는 다시 api를 호출하지않아도 리스트가 재렌더링되는 등의... 한마디로 backend에서 온 데이터를 그대로 쓰는?? 이런 예제들만있어서 참고가 잘 안되네요.

이럴경우 어떻게 구현하는 것이 좋을까요?? 약간의 팁도 감사합니다.

배민근 · Accepted Answer

어떤 예제를 원하시는지 정확히는 모르겠지만 질문에 빗대에 볼 때 저라면 query의 select와 mapper를 이용할 것 같습니다.

select의 경우 원본 데이터의 형태를 받아 가공할 수 있는 옵션을 제공합니다. onSuccess의 파라미터로 오는 data도 select를 거친다면 data도 미리 바뀌어서 옵니다. 적당히 짧다면 바로 select 내에 쓸 수도 있을거 같고 작성자분께서 적으신 것으로 보았을때 좀 복잡할거 같아 따로 mapper를 둘 거 같습니다.

mapper의 경우는 데이터 맵핑을 하기 위한 것으로 함수 형태로 작성해도 class 형태로 작성해도 원하시는 대로 만드시면 되는데요! 제가 한다면 저는 함수 형태로 따른 파일에 분리해둔 다면 select에 data를 받아 ~~ViewModel(data) 이런 식으로 반환할 것 같네요! (요건 react query에 있는 개념이라기보단 프로그래밍에서 일반적인 개념입니다~)

근데 이러나 저러나 응답이 좀 맘에 안드신다면 너무 FE에서만 고민하시지 마시고 서버쪽과도 이야기해보고 응답을 바꾸거나 BFF 쓰는 방법도 있을거 같아요..!