React에서 react-query refetch()사용하기.

오늘도 새로운 에러가 발생하였다!😂

그것은 나의 앱이 url주소에서 쿼리스트링 값을 통해 API의 값을 가져오는데,

react-router-dom에서 같은 페이지로 인식을 해서 그런지, 뒤로가기나 앞으로 가기를 눌렀을 때, react-query가 새로운 값을 가져오지 않는 것이다.

처음에는 useEffect에 쿼리스트링 값이 변할 때, 새로고침하도록 시도하였으나, 새로고침이 한 번만 실행되지 않아, react-query의 refetch() 기능을 사용하였다.

코드는 다음과 같다.

const username = new URLSearchParams(location.search).get(
  "username"
) as string;
// URL에서 쿼리스트링 가져오기
const {
    data: userData,
    isLoading,
    refetch,
  } = useQuery<userInterface>(["userData"], () => getPuuid(server, username));

useEffect(() => {
  refetch();
}, [username]);
//쿼리스트링이 바뀔 때마다 useQuery refetch()작동

-----추가-----
하위 컴포넌트에서는 위와 같이 username(쿼리스트링)이 바뀔 때마다 refetch가 작동하지 않는다. (상위 컴포넌트에서 사용하면 중복이 안되나..?)
그러므로 상위컴포넌트에서 props로 받는 userData를 대신 사용하자

export const SummonerBot: React.FC<Ipuuid> = ({ userData }) => {
.....

const { data: matchData, refetch } = useQuery(["matchData"], () =>
    getMatchs(userData.puuid, Range)
);
 
useEffect(() => {
    refetch();
  }, [refetch, userData]);