velopert/veltrends

UseMutationOptionsOf에 대해 질문이 있습니다

Closed this issue · 1 comments

안녕하세요 벨로퍼트님.
벨로퍼트님의 리액트쿼리 훅에 대해서 많은 영감을 받아서 적용 중에 있습니다.
그러던 도중에 UseMutationOptionsOf의 Parameters부분에 문제가 생겨서 질문을 올립니다.

마지막 코드에서 () => mutate() 같은 경우 undefined로 되어서 에러가 뜹니다.
그래서 첫번째 코드와 같이 Parameters 부분을 Parameters<TAPI>[0] extends undefined ? void : Parameters<TAPI>[0] 으로 바꿔 주었습니다.
괜찮은 코드일까요?

import { AppError } from '@/lib/error';
import {
  UseInfiniteQueryOptions,
  UseMutationOptions,
  UseQueryOptions,
} from '@tanstack/react-query';

export type UseMutationOptionsOf<TAPI extends (...args: any) => any> =
  UseMutationOptions<
    Awaited<ReturnType<TAPI>>,
    AppError,
    Parameters<TAPI>[0] extends undefined ? void : Parameters<TAPI>[0]
  >;
import type { AuthParams } from '@/lib/types';
import apiClient from './apiClient';

const AuthAPI = {
  logout: async () => {
    const { data } = await apiClient.delete<void>('/auth/logout');
    return data;
  },
};

export default AuthAPI;
import AuthAPI from '@/lib/api/auth';
import { useMutation } from '@tanstack/react-query';
import type { UseMutationOptionsOf } from '@/hooks/queries/types';

const useLogout = (
  options: UseMutationOptionsOf<typeof AuthAPI.logout> = {},
) => {
  return useMutation(AuthAPI.logout, options);
};

export default useLogout;
const { mutate } = useLogout({
    onSuccess: () => {
      window.location.href = '/';
    },
  });
<Button size="sm" color="warning" shadow onClick={() => mutate()}>
  로그아웃
</Button>

매우 좋으네요 :)
시간날때 이 프로젝트에서도 그렇게 반영해놔야겠습니다.