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

bj2525님의 프로필 이미지
bj2525

작성한 질문수

Next.js 시작하기(feat. 지도 서비스 개발)

매장 데이터 불러오기(feat. SWR)

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

해결된 질문

작성

·

372

1

server state 관리를 swr 말고 react-query를 사용하려고 합니다.

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

const { data } = useQuery([queryKey], fetchFun)

답변 1

0

박용주님의 프로필 이미지
박용주
지식공유자

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

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

감사합니다 :)

bj2525님의 프로필 이미지
bj2525

작성한 질문수

질문하기