react-query Client Server dependency 문제

[zi-gae]

see also #40 (comment)

방법 1

export const fetchFoo = () => callApi()

const useFetch = (key) => {
  return useQuery(key, fetchFoo)
}

export default useFetch

위 처럼 훅스를 생성해 두고 server에서 fetchFoo를 이용해 호출 하고,
클라이언트에서 useFetch 를 이용하면 server 에서 설정한 store 값이 없다면 호출 해서 store를 생성하고,
있다면 캐시된 데이터를 사용하므로 server 에서 설정한 store 값에 대한 의존성을 낮출 수 있지만
queryKey는 정적이지 않으므로 key 값 에 대한 의존성이 남아있음.

방법 2

const useFetch = () => {
  // api를 호출하고 server or client condition 구분해서 각 리턴 값을 달리 해준다. 
}
export default useFetch

방법1과 차이점은 SRP 벗어나고 유지보수에 안좋은 코드 될 가능성이 농후함.
server에서 useBlaBla hooks 네이밍을 가진 코드가 호출 되는 기이한 코드가 탄생함.

hooks only work on client

당장은 편할거 같은 방법이지만 장기적으로 좋은 방법은 아닌듯 함.