[z.com] React Query V5

z.com 강의를 보며 내가 몰랐던 내용과 V5로 업데이트 되면서 바뀐 내용을 coin 프로젝트에 업데이트 해보자!

1. useQuery 문법 수정

• 이전 버전에는 useQuery를 사용할 때 객체를 이용하여 지정해주는 방식이 아니라, 바로 ['coin']과 같이 적는 방식이었습니다.

  useQuery(key, fn, options)

• useQuery({ queryKey, queryFn, ...options }) 으로 변경이 되었고, option도 객체를 또 열어주는 방식이 아닌 바로 뒤에 붙여서 적어줍니다.

• 변경코드

  export const useGetCoinQuery = () => {
   return useQuery([`coin`], () => getCoinApi(), {
     refetchOnWindowFocus: true,
     refetchOnMount: true,
     refetchOnReconnect: true,
   });
  };
  
  export const useGetCoinQuery = () => {
   return useQuery({
     queryKey: [`coin`],
     queryFn: getCoinApi,
     refetchOnWindowFocus: true,
     refetchOnMount: true,
     refetchOnReconnect: true,
   });
  };

2. 타입 지정

   그동안 react query에서 타입 지정을 해줄 수가 없어, API를 호출할 때 as를 이용하여 타입을 지정해주었는데 useQuery와 같이 타입을 써줄 수 있었습니다!

   왜 몰랐었지...

   Before

   const getCoinApi = async () => {
    const { data } = await defaultInstance.get('/api/Coin/coin');
    return data as CoinDatas;
   };
   
   export const useGetCoinQuery = () => {
    return useQuery({
      queryKey: [`coin`],
      queryFn: getCoinApi,
      refetchOnWindowFocus: true,
      refetchOnMount: true,
      refetchOnReconnect: true,
    });
   };

   After

   export const useGetCoinQuery = () => {
   return useQuery<CoinDatas>({
     queryKey: [`coin`],
     queryFn: getCoinApi,
     refetchOnWindowFocus: true,
     refetchOnMount: true,
     refetchOnReconnect: true,
   });
   };