컴포넌트 기능 설명

enabled:

• Type: boolean

• Description: 쿼리가 활성화될지 여부를 결정합니다. false로 설정하면 쿼리가 자동으로 실행되지 않습니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', enabled: isUserLoggedIn, // 쿼리를 조건부로 활성화 });

refetchOnWindowFocus:

• Type: boolean

• Description: 사용자가 브라우저 창을 다시 포커스할 때 쿼리를 다시 가져올지 여부를 결정합니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', refetchOnWindowFocus: true, // 창 포커스 시 재요청 });

refetchOnMount:

• Type: boolean

• Description: 컴포넌트가 마운트될 때 쿼리를 다시 가져올지 여부를 결정합니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', refetchOnMount: false, // 마운트 시 재요청하지 않음 });

refetchOnReconnect:

• Type: boolean

• Description: 네트워크가 다시 연결될 때 쿼리를 다시 가져올지 여부를 결정합니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', refetchOnReconnect: true, // 네트워크 재연결 시 재요청 });

retry:

• Type: boolean | number

• Description: 쿼리 실패 시 재시도 횟수를 설정합니다. false로 설정하면 재시도하지 않습니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', retry: 3, // 최대 3번 재시도 });

cacheTime:

• Type: number

• Description: 데이터가 캐시에 유지되는 시간입니다. 이 시간이 지나면 데이터는 가비지 컬렉션에 의해 메모리에서 제거됩니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'comments', endpoint: '/api/comments', cacheTime: 10 * 60 * 1000, // 10 minutes });

onSuccess:

• Type: (data: TData) => void

• Description: 쿼리가 성공적으로 완료되었을 때 호출되는 콜백 함수입니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', onSuccess: (data) => { console.log('Data fetched successfully:', data); }, });

onError:

• Type: (error: TError) => void

• Description: 쿼리가 실패했을 때 호출되는 콜백 함수입니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', onError: (error) => { console.error('Error fetching data:', error); }, });

select:

• Type: (data: TData) => TSelectedData

• Description: 쿼리 데이터에서 특정 부분만 선택하여 반환할 수 있는 함수입니다.

• Usage:

  const { data } = useGetQuery({ queryKey: 'posts', endpoint: '/api/posts', select: (data) => data.posts, // 데이터의 특정 부분만 선택 });

mutationKey:

• Type: string | unknown[]

• Description: 뮤테이션을 식별하는 키입니다. 이 키는 캐시된 뮤테이션 데이터를 식별하는 데 사용됩니다.

• Usage:

  const mutation = useMutationQuery({ queryKey: 'myData', endpoint: '/api/my-endpoint', method: 'POST', mutationKey: 'createPost', });

onMutate:

• Type: (variables: TVariables) => Promise<unknown> | unknown

• Description: 뮤테이션이 시작될 때 호출되는 함수입니다. 이 함수는 뮤테이션이 발생하기 전에 실행되며, 낙관적 업데이트를 설정하거나 캐시를 업데이트하는 데 사용할 수 있습니다.

• Usage:

  const mutation = useMutationQuery({ queryKey: 'myData', endpoint: '/api/my-endpoint', method: 'POST', onMutate: (variables) => { console.log('Mutation started with variables:', variables); }, });

• onSuccess:

  • Type: (data: TData, variables: TVariables, context: unknown) => void

  • Description: 뮤테이션이 성공적으로 완료되었을 때 호출되는 함수입니다. 이 함수는 서버에서 반환된 데이터와 함께 호출되며, 성공적인 응답을 처리하는 데 사용할 수 있습니다.

  • Usage:

    const mutation = useMutationQuery({ queryKey: 'myData', endpoint: '/api/my-endpoint', method: 'POST', onSuccess: (data) => { console.log('Mutation successful with data:', data); }, });

• onError:

  • Type: (error: TError, variables: TVariables, context: unknown) => void

  • Description: 뮤테이션이 실패했을 때 호출되는 함수입니다. 이 함수는 발생한 에러와 함께 호출되며, 에러를 처리하는 데 사용할 수 있습니다.

  • Usage:

    const mutation = useMutationQuery({ queryKey: 'myData', endpoint: '/api/my-endpoint', method: 'POST', onError: (error) => { console.error('Mutation failed with error:', error); }, });

• onSettled:

  • Type: (data: TData | undefined, error: TError | null, variables: TVariables, context: unknown) => void

  • Description: 뮤테이션이 성공 또는 실패 후에 항상 호출되는 함수입니다. 이 함수는 뮤테이션의 결과와 상관없이 호출되며, 후속 처리를 수행하는 데 사용할 수 있습니다.

  • Usage:

    const mutation = useMutationQuery({ queryKey: 'myData', endpoint: '/api/my-endpoint', method: 'POST', onSettled: (data, error) => { console.log('Mutation settled with data:', data, 'and error:', error); }, });

• retry:

  • Type: boolean | number | (failureCount: number, error: TError) => boolean | number

  • Description: 뮤테이션이 실패했을 때 재시도할 횟수를 설정합니다. false로 설정하면 재시도하지 않습니다. 함수로 제공하면 재시도 여부를 동적으로 결정할 수 있습니다.

  • Usage:

    const mutation = useMutationQuery({ queryKey: 'myData', endpoint: '/api/my-endpoint', method: 'POST', retry: 3, // 최대 3번 재시도 });

• retryDelay:

  • Type: number | (failureCount: number, error: TError) => number

  • Description: 재시도 사이의 지연 시간을 설정합니다. 기본값은 지수 백오프입니다. 함수로 제공하면 지연 시간을 동적으로 결정할 수 있습니다.

  • Usage:

    const mutation = useMutationQuery({ queryKey: 'myData', endpoint: '/api/my-endpoint', method: 'POST', retryDelay: 1000, // 1초 지연 후 재시도 });