[React] reactQuery queryKey와 queryFn의 관계, refetch()

useQuery를 사용하면서 알게 된 몇가지 사실들!

1. queryKey와 queryFn의 관계

  const { data: activeProjectsData } = useQuery({
    queryKey: ['myProjects', filteredPidList],
    queryFn: getActiveProjects,
    staleTime: staleTime.myProjects,
    enabled: !!currentPidList,
  });

=> queryKey에 있는 데이터를 queryFn이 매개변수로 사용할 수 있다.

queryFn에 정의해준 함수에서 매개변수를 콘솔로 찍어보면 아래와 같이 객체가 찍히는 것을 알 수 있다. 

이 객체 중 하나로 queryKey가 들어가기 때문에 이를 활용해서 함수 안에서 자유롭게 사용할 수 있다.

 

2. queryFn에 매개변수 지정하기

하지만 난 다른 컴포넌트에서 invalidateQueries를 써야해서 queryKey 안에 지역 변수를 사용할 수 없다면

  const { data: activeProjectsData } = useQuery({
    queryKey: ['myProjects', "filteredPidList"],
    queryFn: ()=>getActiveProjects(filteredPidList),
    staleTime: staleTime.myProjects,
    enabled: !!currentPidList,
  });

이와 같이 함수에 직접 매개변수를 지정할 수 있고 아까와 같이 함수에서 매개변수를 찍어보면

아래와 같이 값들이 들어오는 것을 확인할 수 있다.

 

하지만 이렇게 했을 때 데이터가 fetch 되지 않는 오류가 발생한다.

이럴 땐 useQuery의 기본 option 중 하나인 refetch를 통해 수동으로 다시 쿼리를 가져올 수 있다.

적절한 곳에서 refetch()함수를 호출해주면 데이터가 다시 불러와지는 것을 react query devtools를 통해 확인할 수 있었다.

 

하지만 서버에 부하를 줄 수 있기 때문에 페이지 성능에는 좋지 않을 것 같다는 생각이 든다.