Tanstack Query에서 useQuery에서 POST를 사용해도 될까?

Problem - 모든 백엔드 요청을 POST로 처리해야할 때 Tanstack query는 어떻게 사용해야 하나?

처음 이 Nextjs 프로젝트를 시작하게 되었을 때 받은 첫 사양은 모든 요청을 POST로 처리하고 프론트에서는 tanstack-query를 사용한다는 것이었다.

처음으로 내가 생각한 방법은 모든 Tanstack query 신택스를 useMutation으로 작업하는 것이었다.

Goal - Tanstack Query에서 useQuery의 fetcher에 POST 요청을 사용해도 되는가?

하지만 Official React-query docs - Mutation에서는 이렇게 설명하고 있다.

mutation은 C/U/D 요청이나 서버 사이드 이펙트를 일으키는 작업에 사용됩니다. TanStack Query에서 useMutation을 사용하세요.

따라서 데이터를 가져오는 요청이 POST라고 하더라도, 해당 요청이 R만을 수행하므로 useQuery를 사용하는 것이 맞다고 생각했다.

As long as you return with a promise with the data, you can do anything in the query function reddit 댓글

이 레딧 포스트의 댓글과 리턴타입을 참고한다면, 실제로 promise를 리턴하기만 하면 어떤 비동기 로직을 넣어도 상관없는 모양이다.

Implementation - useQuery의 fetcher에 POST 요청을 넣어보자.

// src/queries/mainQueries.ts

export function useGetBannerQuery() {
  const query = useQuery({
    queryKey: mainKeys.eventBanner(),
    queryFn: async (prams: BannerParamType) => {
      const path = `/banner/getBanners`;
      const url = `${process.env.NEXT_PUBLIC_API_ENDPOINT}${path}`;
        const res: ApiResponse<MainBannerPayload> = await axios.post(url, params);
        return res;
    },
  });
  return { banners: query.data, ...query };
}

...

const MainPage = () => {
  ...
  const [_unusedData, { isFetching: isMainBannerLoading }] =   useMainBannerQuery();

  ...
}

문제없이 작동한다.

Summary

GET/POST 상관없이 데이터 페칭이면 useQuery, 서버 사이드 이펙트가 있으면 useMutation. queryFn에 POST를 넣고 쿼리 키로 관리하면 된다.

Refs

reddit 댓글 Official React-query docs - Mutation