2023.01.05

이짜젠·2023년 1월 4일
0

useQuery의 재호출

useQuery는 첫 호출할 때 한번만 api를 call 한다.

만약 api를

  • 같은 파라미터로 재호출하고싶다면 query.refetch를 사용한다.
  • 다른 파라미터로 재호출하고싶다면, queryKey를 바꿔주면된다.
    - react-hook 은 queryKey가 변경되면 자동으로 재호출한다. (참고)

꼼수로 queryKey로 넘기는 값을 state로 관리하여, state를 바꾸면서 재호출시킬 수 있다.
별도의 customHook으로 구현해볼 수도 있다.

export function useLazyQuery(
  initalParams?: ApiParams,
) {
  const [params, setParams] =
    useState<ApiParams | undefined>(initalParams);
  const queryClient = useQueryClient();

  const query = useQuery(['test-refetch', params], () => api({ params }));

  const fetch = (newParams: ApiParams) => {
    setParams(newParams);
  };

  return { query, fetch };
}
profile
오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.

0개의 댓글