안녕하세요 용주님 질문이 있습니다~

Question

server state 관리를 swr 말고 react-query를 사용하려고 합니다. 아래와 같이 해당 queryKey를 가지고 stores에 대한 data를 전역으로 관리하고 싶었는데, fetchFunction 자리에 stores props가 들어갈 수 없어서 처음에 어떻게 initialdata를 가져올 수 있을지 잘 모르겠습니다.. react-query는 수업때 배우진 않지만 혹시 아시는 부분이 있다면 알려주시면 감사하겠습니다 !! const { data } = useQuery([queryKey], fetchFun)

박용주 · Answer

안녕하세요! 질문 감사합니다. react-query는 서버 상태에 대한 비동기 처리를 다루기 때문에 아래의 코드가 가장 기본적인 코드입니다. const { data } = useQuery(['stores'], () => { return fetch(`/api/stores`).then((response) => response.json()); }); 단순하게 전역 상태를 index page에서 저장하고 다른 컴포넌트에서 사용하는 로직이라면 아래의 코드도 가능해보입니다. // index page const queryClient = useQueryClient(); queryClient.setQueryDefaults(['stores'], { queryFn: () => stores }); // components const { data } = useQuery({ queryKey: ['stores'] }); 하지만 mutation 등의 확장성을 고려했을 때 좋은 설계는 아닙니다. react-query는 swr과 사용법이 다르기 때문에 기존 로직(currentStore 등)을 react-query로 모두 바꾸려면 새로운 설계를 생각하셔서 전반적으로 변경하는 것이 좋아보입니다! 감사합니다 :)