🔥 기본 쿼리 함수

281자

4분

TanStack Query를 사용하면서 전체 앱에서 동일한 쿼리 함수를 공유하고 단순히 쿼리 키로 가져올 데이터를 식별하고 싶다면, TanStack Query에 기본 쿼리 함수를 제공하여 이를 구현할 수 있습니다.

다음은 기본 쿼리 함수를 설정하고 사용하는 방법을 보여주는 예제입니다:

// 쿼리 키를 받아 처리하는 기본 쿼리 함수를 정의합니다
const defaultQueryFn = async ({ queryKey }) => {
  const { data } = await axios.get(
    `https://jsonplaceholder.typicode.com${queryKey[0]}`,
  )
  return data
}
 
// QueryClient를 생성하고 defaultOptions를 통해 기본 쿼리 함수를 앱에 제공합니다
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryFn: defaultQueryFn,
    },
  },
})
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}
 
// 이제 쿼리 키만 전달하면 됩니다!
function Posts() {
  const { status, data, error, isFetching } = useQuery({ queryKey: ['/posts'] })
 
  // ...
}
 
// 쿼리 함수를 생략하고 바로 옵션을 설정할 수도 있습니다
function Post({ postId }) {
  const { status, data, error, isFetching } = useQuery({
    queryKey: [`/posts/${postId}`],
    enabled: !!postId,
  })
 
  // ...
}
 typescript

이 예제에서는 defaultQueryFn이라는 기본 쿼리 함수를 정의했습니다. 이 함수는 쿼리 키를 받아 해당 키를 URL의 일부로 사용하여 데이터를 가져옵니다. 그런 다음 QueryClient를 생성할 때 defaultOptions를 통해 이 함수를 기본 쿼리 함수로 설정합니다.

이렇게 설정하면 개별 쿼리에서 매번 쿼리 함수를 정의할 필요 없이 쿼리 키만 전달하면 됩니다. Posts 컴포넌트에서 볼 수 있듯이, useQuery 훅에 쿼리 키만 전달하여 데이터를 가져올 수 있습니다.

더 나아가 Post 컴포넌트 예제처럼 쿼리 함수를 완전히 생략하고 바로 다른 옵션을 설정할 수도 있습니다. 여기서는 enabled 옵션을 사용하여 postId가 존재할 때만 쿼리를 실행하도록 설정했습니다.

물론 특정 쿼리에서 기본 쿼리 함수를 사용하지 않고 싶다면, 언제든 원하는 쿼리 함수를 직접 제공하여 기본값을 재정의할 수 있습니다. 이렇게 하면 대부분의 경우 기본 쿼리 함수의 편리함을 누리면서도, 필요할 때 유연하게 커스텀 로직을 적용할 수 있습니다.

강의 내용