React Query

개요

애플리케이션의 상태는 클라이언트 자체의 상태와 서버에서 전달받는 상태로 구분할 수 있다. 일반적으로 두 종류의 데이터를 모두 contextAPI, redux, mobx 등의 전역 상태 관리 도구로 함께 관리하는데 react query는 이러한 편견에서 벗어날 수 있게 해주는 라이브러리이다.

잘 생각해보면 서버로부터 전달받은 상태는 비동기적이다. 비동기적이다라는 말은 서버의 상태와 클라이언트의 상태가 일치하지 않을 수 있다는 말과 같다. 클라이언트는 유저에게 데이터를 보여줄 때마다 동기화 된(최신화 된) 데이터를 보여줘야 하기 때문에 api호출을 통해서 데이터를 서버에서 받아와서 사용한다. 그럼에도 불구하고 전역상태로 관리해야할 필요가 있을까? 라는 의문이 든다.

서버의 상태를 전역상태로 관리하지 않는 것은 어렵지 않다. 필요할 때 api를 호출해서 사용하면 되기 때문이다. 그렇다면 react query가 하는 역할은 무엇일까. react-query는 이전 데이터를 caching 하고 있어서 필요하면 api를 호출하지 않아도 데이터에 접근할 수 있다. 또한 prefetching, refetching, optimistic update등 직접 구현하려면 복잡한 기능들을 제공한다.

Lifecycle

• fetching: api가 현재 호출 중
• fresh: 인스턴스의 데이터가 최신화된 데이터라고 간주하며 refetching 대상
• stale: 인스턴스를 데이터가 최신화 되지 않았다고 간주하며 refetching 대상
• inactive: 인스턴스를 observe하는 컴포넌트가 없는 상태 (단, fetching 중일 경우 observe 되지 않아도 fetching상태를 유지한다)
• destroy(임의): 인스턴스가 오래되어 GC되어버림

Option

• staleTime: fresh 상태에서 stale 상태가 되는데 걸리는 시간, fresh 상태 지속시간 (default: 0)
• cachedTime: inactive 상태에서 cachedTime만큼의 시간이 지나면 GC됨 (default: 1000 * 60 * 5)
• select: fetcher가 리턴한 데이터를 가공
• enabled: false이면 fetch를 안함
• retry: fetch 실패시 재시도 횟수 (default: 3)
• retryDelay: 실패시 재시도 할 때까지 기다리는 시간