How-to-trigger-Fetch-in-RTK-Query

문서 생성 2023-07-24 23:45:19 최근 수정 2023-07-24 23:50:51

RTK Query에서 데이터를 가져올 때 fetchBaseQuery 를 사용한다.

공식 문서에 나온 코드를 참고하면 다음과 같이 use로 시작하는 hook을 사용할 수 있다.

export const PostDetail = ({ id }: { id: string }) => {
  const {
    data: post,
    isFetching,
    isLoading,
  } = useGetPostQuery(id, {
    pollingInterval: 3000,
    refetchOnMountOrArgChange: true,
    skip: false,
  })

  if (isLoading) return <div>Loading...</div>
  if (!post) return <div>Missing post!</div>

  return (
    <div>
      {post.name} {isFetching ? '...refetching' : ''}
    </div>
  )

내가 궁금한 것은 컴포넌트가 렌더링될 때 데이터를 가져오지 않고 어떤 이벤트가 발생했을 때 가져오고 싶었다.

역시나 방법은 있었ek. useLazyQuery를 사용하면 된다! useLazyQuery가 반환한 배열의 첫 번째 요소를 원하는 이벤트 발생시 호출하면 그때 데이터를 가져온다.

const [trigger, result, lastPromiseInfo] = api.useLazyGetPostsQuery(options)

const handleClick = () => {
  trigger()
}

How-to-trigger-Fetch-in-RTK-Query

LINKS TO THIS PAGE

Tags