[FE] useQuery의 data.data.data를 어떻게 해결할까?

[euijinkk]

현재 상황

export const useKkogKkogList = () => {
  const kkogkkogListQuery = useQuery(['kkogkkogList'], getKkogkkogList, {
    suspense: true,
  });

  return {
    kkogkkogList: kkogkkogListQuery.data?.data,
    ...kkogkkogListQuery,
  };
};

export const getKkogkkogList = () =>
  client.get<KkogKkogListResponse>('/coupons', {
    transformResponse: stringResponse => {
      const parsedData = JSON.parse(stringResponse);

      if (parsedData.error) {
        return parsedData;
      }

      return parsedData.data;
    },
  });

각 data는 무엇을 가리키는가?

1. data - useQuery의 data
2. data - AxiosResponse의 data
3. data - server schema 의 data

각 data는 어떻게 해결할 수 있는가?

1. useQuery의 data는 스프레드로 return 하기 때문에 문제가 없다.

2. AxiosResponse에서 data를 뽑아내기

2가지 방법이 있다.

2.1. fetcher에서 async/await 통신하기

export const getKkogkkogList = async () => {
  return (await client.get<KkogKkogListResponse>('/coupons')).data;
};

어떤 장점이 있는가 생각해보면, 혹시 사용될지 모를 AxiosResponse 데이터를 사용할 기회를 얻을 수 있다.
(있을까?)

2.2. useQuery 의 select 옵션 사용하기

select는 useQuery의 결과를 가공하는 방법이다.

const kkogkkogListQuery = useQuery(['kkogkkogList'], getKkogkkogList, {
    suspense: true,
    select(data) {
      return data.data;
    },
  });

3. transformResponse는 사용해야할까?

현재 모든 List데이터는 data 객체로 감싸서 오고 있다. 이는 data 객체 이외에 무한 스크롤 등 다른 프로퍼티가 들어갈 여지를 주는 것이다.
하지만 우리가 transformResponse를 사용하고, 이후에 data 객체 이외의 프로퍼티가 추가될 경우 transformResponse를 걷어내야 한다.
data를 뽑아내기 위해 transformResponse를 사용하는 것은 적절하지 않아 보인다.

시지프의 제안

fetcher

export const getKkogkkogList = async () => {
  return (await client.get<KkogKkogListResponse>('/coupons')).data;
};

AxiosResponse에서 data만 뽑아낸다. 타입을 써주어 타입 추론시킨다.

useQuery hook

export const useKkogKkogList = () =>
  useQuery(['kkogkkogList'], getKkogkkogList, {
    suspense: true,
  });

useQuery 통신결과를 그대로 return 한다.
이때 fetcher에서 타입을 지정해주었으므로, useQuery의 타입은 추론된다.

component

const { data } = useKkogKkogList();
const kkogkkogList = data?.data;

데이터 통신 후, 필요한 데이터를 뽑아낸다. data 객체 이외에 dataLength나 unreadCount 같은 프로퍼티를 사용할 여지를 남겨둔다.