React-Query 도입하기

도입 배경

• react-query의 강력한 캐싱 기능
• 서비스 특성 상 클라이언트 데이터보다 서버 데이터가 많고, 좀 더 체계적인 관리가 필요함.
• 서버 데이터를 다루기 위한 여러 상태들(data, loading, error…) 관리를 react-query에 맡길 수 있음.

React-Query 도입

• react query로 자동완성 데이터를 받아오고, staleTime을 5분으로 해서 5분동안 캐싱이 유지되도록 함.
• 키워드가 변경될 때마다 요청을 보냄.

const [keyword, setKeyword] = useState<string>('');

const { data } = useQuery<IAutoComplete>(
    ['getAutoComplete', keyword],
    () => searchApi.getAutoComplete({ keyword }).then((res) => res.data),
    {
      staleTime: 5 * 60 * 1000,
      onSuccess: (data) => {
        const { papers, keyword: _keyword } = data;
        if (_keyword === keyword) setAutoCompletedDatas(papers);
      },
      enabled: !!(keyword && keyword.length >= 2),
    },
  );

→ useQuery의 첫번째 인자 배열의 두번째 인자로 keyword를 넘겨서 요청시 parameter로 사용할 수 있음.

결과 : react query는 query key가 같아도 parameter가 다르면 다른 캐시에 관리한다. 자동완성 하나하나를 캐싱할 수 있음.

요청을 우다다다 날렸다면 응답이 온 순서대로 데이터를 사용하는게 아니라, 마지막에 보낸 요청에 대한 응답만 사용함.

추가로 필요한 기능 :

• react query에 자체 debounce 기능은 없음.
• 에러 처리

debounce 적용

• 기존 : keyword가 변할 때마다 요청을 보냄.