FSD 구조를 사용할 때 TanStack Query를 더 효율적으로 사용하기 위해 QueryFactory 형식으로 API요청 관리해주면 좋다는 FSD 공식문서 내용을 보고 queryFactory를 적용 해보기로 한다. qeuryFactory는 queryOptions로 구성한다.

queryOptions

queryKey와 queryFn을 재설정 없이 공유하기 위해 queryOptions를 사용할 수 있다. 한 곳에서 공통 옵션을 정의해주어 반복 설정해주지 않아도 된다는 이점이 있다.

const getLearnerStatus = (learnerId: string) =>
    queryOptions({
        queryKey: ['learnerStatus', learnerId],
        queryFn: () => client.get('...'),
        staleTime: 1000,
        ...
    });

mutationOptions

하지만 mutation option을 따로 지정해주는 헬퍼 함수는 없었다. 그래서 처음에는 setMutationDefaults을 사용하고자 했다.

queryClient.setMutationDefaults(['mutationKey'], { ...mutationOptions })

queryClient에 setMutationDefaults 를 사용해 mutationKey와 mutationOption을 각각 넣어주면 key만으로 해당 옵션을 불러와 사용할 수 있다.

편리하기는 했지만 목적은 queryFactory를 만들기 위함이었기에 통일성을 주고자 queryOptions와 똑같이 기능하는 mutationOptions를 정의해주었다.

export function mutationOptions<TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown>(
    options: UseMutationOptions<TData, TError, TVariables, TContext>
): UseMutationOptions<TData, TError, TVariables, TContext> {
    return options;
}

mutation의 옵션을 넣어 queryOptions와 똑같이 작성해주면 된다.

const postLearnerStatus = () =>
    queryOptions({
        mutationKey: ['postLearnerStatus'],
        mutationFn: (learnerId:string) => client.get('...', {learnerId}),
        onSuccess,
        onError,
        ...
    });

queryFactory

이제 앞서 작성한 queryOptions, mutationOptions를 활용해 하나의 queryFactory로 관리할 수 있다.

queryFactory 작성

export const learnerAPIQueries = {
    getLearnerStatus: (learnerId: string) =>
        queryOptions({
            queryKey: ['learnerStatus', learnerId],
			      queryFn: () => client.get('...'),
			      staleTime: 1000,
        }),
    postLearnerStatus = () =>
		    queryOptions({
		        mutationKey: ['postLearnerStatus'],
		        mutationFn: (learnerId:string) => client.get('...', {learnerId})
		    })
};

queryFactory 사용

const { data } = useQuery(learnerAPIQueries.getLernerStatus());
const { mutate } = useMutation(learnerAPIQueries.postLearnerStatus())
// 개별 옵션이 필요할 경우 다음과 같이 작성한다.
const { mutate } = useMutation({...learnerAPIQueries.postLearnerStatus(), onSuccess : () => {...}})