#5.9 React Query part One, Two

1. fetcher function => 반드시 fetch promise 반환해야 한다

export async function fetchCoins() {
  const response = await fetch("https://api.coinpaprika.com/v1/coins");
  const json = await response.json();
  return json
}

이랬던 함수를.. 아래와 같이 변형 가능(await 사라지고 .then 생김)

export async function fetchCoins() {
  return fetch("https://api.coinpaprika.com/v1/coins").then((response) =>
    response.json()
  );
}

useQuery는 고유 키값과 fetcherfunction 총 두개를 인자로 받는다. 그리고 boolean값인 isloading과 fetcherfunction이 반환하는 데이터를 data에 담는다.
const {isLoading, data} = useQuery<ICoin[]>("allCoins", fetchCoins)

arguments가 필요한 함수를 입력할 때는 arrow function 사용.
React Query는 각각 다른 key(react query는 key를 배열로 인식)를 원하기 때문에 배열로 만들어서 차이를 주어야 함
isLoading, data도 마찬가지.
(이름을 주는 방식이 특이함.. 각각 고유변수명뒤에 ":" 쓰고 원하는 이름을 명명) => object의 property를 가져온 다음 syntax를 이용하여 이름을 바꾼다 ( just normal js문법이었다고 한다 )

const { isLoading: infoLoading, data: infoData } = useQuery<InfoData>(["info", coinId], () => fetchCoinInfo(coinId))
const { isLoading: tickersLoading, data: tickersData } = useQuery<PriceData>(["tickers",coinId], () => fetchCoinTickers(coinId))

(의문인 점.. typescript는 InfoData나 PriceData가 data 에 해당하는 건지 isLoading에 해당하는 건지 어떻게 아는 거지?)

React-Query => 강력한 캐싱 매커니즘 & fetcher function