[TIL] 2022-10-25

오늘은 리액트 쿼리를 살펴보았다.
살펴보았다기는 뭐하고 그냥 짜여져있는 코드를 들여다보며 구조를 알아내는 시간을 가졌다고 하는 게 맞을 듯...

오늘의 배움은... 리액트 쿼리에 넣어서 가져오는 모든 값은 무조건 data라는 것이었어요.

// 원래 되어 있었던 코드

  const { data } = useQuery(['AAA', id], () => AAA(id), {
    enabled: !!id,
    retry: false,
    retryOnMount: false,
    refetchOnWindowFocus: false
  });

export const AAA = async (id) => {
  const { data } = await mockFetcher.get(`test/test1`);
  return data as any;
};


// 내가 따라한 코드
  
  const { data: dataDetail } = useQuery(
    ['BBB', id],
    () => BBB(id),
    {
      enabled: !!id,
      retry: false,
      retryOnMount: false,
      refetchOnWindowFocus: false
    }
  );

export const BBB = async (id) => {
  const { data } = await mockFetcher.get(`test/test2`);
  return data as any;
};

data라는 게 이미 불러와져 있었고 나는 똑같은 페이지에서 또 data라는 변수명을 쓸 수 없다고 생각해서 처음부터 import { dataDetail } from XXXXX라고 불러왔는데 undefined가 계속 떠서 머리를 쥐어 뜯었다...
무엇보다 data는 바로 set이 되는데 dataDetail은 onClick이벤트로 data에 있는 정보 중에 일부로 axios에 정보를 넣어서 찾아와야 했기에 어디가 잘못된 건지 가늠이 되지 않았다.
그래서 물어보았더니 useQuery에서 반환되는 값은 모두 data로 이름이 정해져 있는 것이기 때문에 alias를 써야한다고 한다...

import { data: dataDetail } from XXXXX로 고치니까 바로 되었다...

(코드는 간략화 시켜서 실제와는 다름)