Params의 변화에 따라 useQuery refetch 하기

https://stackoverflow.com/questions/67796103/refetch-with-different-data-react-query

refetch with different data react query

서버에서 데이터를 가져오기 위해 react query를 사용했습니다.

useQuery를 호출할 때 router에서 쿼리스트링 값을 가져온 후, 그 쿼리스트링이 변화함에 따라 refetch 하고 싶었습니다.

그 이유는 새로고침 이후에도 쿼리스트링 값에 따른 데이터를 유지해야 하는데

자동으로 refetch가 되지 않으면 처음에 useRouter().query에서 빈 객체{}를 반환하여 

쿼리스트링이 undefined가 되어 원하는 데이터를 얻을 수 없었습니다.

순간적으로 쿼리스트링이 빈객체에서 key, value를 가진 객체로 업데이트되면 다시 refetch 해야 합니다.

 

Docs부터 보고 공부했으면 헤맬게 아니었는데(기본인데..) 구현에 급하다가

쿼리 키의 역할을 제대로 이해하지 못하고 사용해서 삽질을 꽤 오래 했습니다. 

쿼리 키의 값이 변경되면 리액트쿼리가 자동으로 다시 refetch를 하기 때문에

'변화하는 매개변수'를 '쿼리 키'에 잘 전달만 해주면 알아서 refetch가 발생합니다.

왜냐하면 쿼리 키의 존재 목적이 라이브러리가 내부적으로 request를 캐싱하는 것이기 때문입니다.

즉, 쿼리 키가 바뀌었으면 요청도 새로 이루어져야 한다는 것입니다.

export default function useGetAllSellerList(params) {
  return useInfiniteQuery(
    sellerHomeKeys.list(params),
    ({ pageParam = 0 }) =>sellerAPI.getAllSellerList({...params, page: pageParam,size:"10"}),
    {
      getNextPageParam: ({nextPage}) => nextPage
    }
  )
}

그래서 쿼리 키를 관리하는 팩토리에 params를 전달해주었습니다.

list: (params) => [...sellerHomeKeys.all, 'list', params.category],

이렇게 해주면 params가 바뀔 때 쿼리 키 자체가 바뀔 테니 캐시 된 데이터를 그대로 보여주지 않고

새로운 데이터를 refetch 하게 됩니다.

 

이렇게 useQuery에서 비구조화 할당으로 refetch함수를 직접 꺼내서 사용하지 말라고 하네요

refetch함수의 목적은 '동일한 매개변수'로 refetch 하기 위한 것이랍니다.

저와 같이 매개변수가 변화하는 경우는 자동으로 refetch를 trigger 하므로 그냥 쿼리 키에 입력만 하면 된다네요.

이래서 docs부터 좀 읽었어야 하는데..

 

오늘은 추석이네요! 코딩은 그만하고 가족들과 좋은 시간 보내십시오!!ㅋㅋ

 

 

https://tkdodo.eu/blog/effective-react-query-keys

Effective React Query Keys