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

안녕하세요! 질문 감사합니다.

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로 모두 바꾸려면 새로운 설계를 생각하셔서 전반적으로 변경하는 것이 좋아보입니다!

감사합니다 :)

인프런 커뮤니티 질문&답변