react-query의 결과 값을 클라이언트에서 조작해도 되는지 궁금해요!

Question

안녕하세요, 프로젝트를 진행하던 중에 팀원과 의견이 갈린 영역이 있어서 질문 올립니다.

스택은 next.js, react-query를 사용하고 있고 서버는 노드입니다.

페이지 중 긴 항목의 아이템들을 보여줘야하는 영역이 있는데, 정렬 로직이 들어가야합니다.

이 정렬 로직을 어디에 추가하느냐에 대해서 의견이 갈렸는데요.

팀원은 react-query를 조회하는 함수는에서 정렬 로직을 수행하는게 좋을 것 같다고 했는데, 저는 서버에서 정렬해서 내려주는게 맞는 것 같아서 서로 의견이 살짝 갈렸었습니다. 서버에서 내려준 값이랑 실제 클라이언트에서 받게되는 값이 달라져서 나중에 볼때 혼란스럽지 않을까하는 우려가 생겨서요. 그리고 조회하는 함수가 SSR에서 호출할때랑 CSR에서 호출할때 조금 달라서, 두 곳 모두 관리를 해야하는게 걸리기도 합니다.

일반적으로 react-query의 결과 값을 클라이언트에서 임의로 조작하나요?

hvp · Answer

React-query에서 꼭 api 요청만 다룰 필요는 없습니다.
비동기 함수를 다루도록 도와주는 라이브러리이기 때문에, 임의로 캐시값을 조작하지 않더라도 useQuery()에 넣어주는 비동기 함수 내에 정렬 로직을 넣어줄 수 있습니다.

다만 가능 여부와는 별개로 보통 테이터량이 많으면 서버에서 정렬합니다. 자세한 상황에 따라 다르지만, 많은 데이터를 한번에 가져오면 사용자에게 필요 없는 정보가 네트워크 리소스를 사용하고, 로딩 시간이 길어지기 때문에 일반적으로 서버에서 페이지네이션(데이터를 나누어 가져오는 것) 작업을 하기도 합니다.

강동희 · Answer

query의 결과 값인 data 를 클라이언트에서 가공해서 사용해도 괜찮습니다.
useQuery의 options에 select 라는 옵션도 있습니다.

질문상의 데이터는 아마 리스트 이지 않을까 싶습니다.
개인적으로는 간단한 정렬이라면 클라이언트에서 정렬을 해도 좋다고 생각하지만, 비교적 복잡한 로직을 요구하는 정렬이라면 서버측에서 정렬을 해서 보내주는게 좋다고 생각합니다.