reactquery useQuery 자동 가져오기 막는 법

😀어떻게 해야할까요?

간혹 그런 경우가 있습니다.

get 요청을 특정 이벤트가 발생했을때만 보내는 기능이 필요할때가요!

그러나 reactquery의 useQuery는 기본적으로 호출한 시점에 바로 데이터 가져오기를 시도합니다.

따라서 이 기본 동작을 멈추고 사용자가 특정 행동을 하였을때에만

데이터를 페칭해오는 로직이 필요하기도 합니다.

 

그런데 useQuery는 바로 데이터가져오기를 시도하니까

특정한 경우에만 사용하려면 useMutation을 사용해야할까요?

그러려고 생각해보니 get 요청에 mutation을 사용하는 것이 이상하게 느껴집니다.

 

다행히 리액트쿼리는 이러한 유즈케이스를 적절한 옵션으로 지원하고 있습니다.

https://tanstack.com/query/v4/docs/react/reference/useQuery

useQuery | TanStack Query Docs

• enabled: boolean
  • Set this to false to disable this query from automatically running.
  • Can be used for Dependent Queries.

문서를 참고해보면 enabled라는 옵션이 우리의 요구사항에 적합한 옵션같아보입니다.

enabled 값을 false로 두면 쿼리가 자동적으로 실행되는 것을 막을 수 있다는 뜻으로 보이네요

useQuery({
 queryKey:["쿼리키"],
 queryFn:만들어둔함수,
 enabled:false
})

이런 형태로 옵션을 주면 되겠습니다.

그럼 특정 조건이 만족되었을때 get 요청을 보내는 건 어떻게할까요?

이것은 useQuery의 반환객체가 제공하는 메서드 refetch() 함수를 이용하여 해결할 수 있습니다.

refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>

const myCustomQuery = useQuery({
 queryKey:["쿼리키"],
 queryFn:만들어둔함수,
 enabled:false
})

myCustomQuery.refetch()

이런 형태로 사용할 수 있겠군요!