React Query

Query는 data fetching으로 받은 비동기 데이터이다.(GET)Mutation은 그 데이터를 업데이트하는 액션이다.(POST, PUT, DELETE) Mutation이 끝나면 대부분 Query에도 영향을 줄 것이다.예를 들어, `issue`데이터를 업데이트 하면 상위 개념인 `issues` 데이터에도 영향을 준다.따라서 React Query가 Mutation과 Query를 연결하지 않는다는 사실에 놀랄 수도 있다. 그 이유는 꽤 단순하다.React Query는 개발자에게 데이터를 맘대로 관리할 수 있도록 자유를 준 것이다.모든 상황에서 Mutation 이후 re-fetching(invalidation)이 필수는 아니다.예를 들어 Mutation api가 업데이트된 데이터를 반환해준다면, 그 데..

타입스크립트를 사용하는건 좋은 생각이다. 타입 안전을 싫어하는 사람이 있을까?버그를 미리 알 수 있고, 복잡한 앱의 구조를 타입으로 정의하여 그 부분들은 우리 머리 속에 담아둘 필요가 없어진다. "타입을 선언"한 것과 "타입 안전"한 것은 큰 차이가 있다.타입스크립트의 진정한 힘을 이용하려면 한 가지가 더 필요하다.신뢰하기우리는 타입 정의를 신뢰할 수 있어야한다.그렇지 않으면 타입은 단순 제안에 불과하고, 정확하다고 믿을 수 없다. - 가장 엄격한 타입스크립트 설정을 활성화하자.- typescript-eslint를 추가하여 `any`타입과 `ts-ignore`를 금지하자.- 타입 단언을 지양하자.제네릭타입스크립트에서 제네릭은 필수적이다.조금이라도 복잡한 걸 구현하려면 제네릭을 사용해야할 것이다. (라이브..

useQuery나 QueryClient.invailidateQueries 등 다양한 react-query 메서드에 파라미터로 넘겨주는 객체를 Query Options라고 부른다.// v5전에도 객체 형태로 넣을 수는 있었지만 이처럼 파라미터를 순서대로 넣는 방식이 널리 쓰였다.- useQuery(- ['todos'],- fetchTodos,- { staleTime: 5000 }- )// v5 부터는 객체 형식이 강제되었다.+ useQuery({+ queryKey: ['todos'],+ queryFn: fetchTodos,+ staleTime: 5000+ })이렇게 객체 형태를 파라미터로 넘겨주는 방식은 v5부터 강제되었는데, 어떤 이유 때문일까?1.  더 나은 추상화 (재사용) 모든..

나는 React Query를 좋아한다. React Query가 React앱에서 비동기 상태를 다루는 방식을 단순화하기 때문이다. 하지만 가끔 서버에서 데이터를 페칭해오는 것처럼 "간단한" 작업에는 React Query가 필요하지 않다고 주장하는 글들을 볼 수 있다.React Query가 제공하는 모든 추가 기능이 필요한 것은 아니니까, useEffect 안에서 fetch를 사용하는 것만으로도 충분할 때 굳이 서드파티 라이브러리를 추가하고 싶지 않다는 것이다. 이는 어느 정도 맞는 말이다.React Query는 캐싱, retry, polling, 데이터 동기화, prefetching 등 많은 기능을 제공한다.이러한 기능들이 필요하지 않다면 괜찮지만, 그렇다고 해서 React Query를 사용하지 말아야 한..

1. 쿼리 상태와 페치 상태 React Query는 현재 상태를 알려주는 플래그를 제공한다. 내부 상태 머신에서 파생된 여러가지 boolean 플래그 값을 제공하는데, 선언된 타입을 보면 `쿼리`상태, `페치`상태가 각각 3가지씩 존재한다. `쿼리`상태 : 데이터(캐시)에 대한 정보 `success`: 쿼리가 성공했고, 이에 대한 `data`가 쿼리캐시에 설정된다. `error`: 쿼리가 실패했고, `error`가 설정된다. `pending`: 쿼리캐시에 데이터가 없다. `페치`상태: Fn에 대한 정보 `fetching`: `queryFn` 요청이 실행중이고 데이터를 기다리고 있다. `paused`: `queryFn`, `mutationFn` 이 실행중이지 않고 다시 인터넷에 연결될 때 까지 일시중지된 ..

이 글을 읽고 queryOptions API 글을 읽는 걸 추천합니다1. 들어가기Query Keys는 React Query에서 아주 중요한 핵심 개념이다.`queryKey` 덕분에 라이브러리 내부적으로 데이터를 올바르게 캐싱하고 `queryKey` dependency가 변경될 때 자동으로 refetch 할 수 있다.또한 mutations 후 수동으로 쿼리 무효화(invalidate)를 하기위해 필요하다. 밑줄 친 위 기능들을 하나씩 살펴보고,각 기능을 효과적으로 수행하기 위해 필요한 효율적인 `queryKey` 선언 방법에 대해 알아보자.2. `queryKey` 관련 기능2.1. 데이터 캐싱내부적으로 Query 캐시는 javascript 객체이다.key: 직렬화된 `queryKey` , value: Qu..

1. 들어가기 에러 핸들링은 비동기 작업(데이터 fetch)에서 필수적이다. Request가 항상 성공하는 것이 아니기 떄문이다. React Query가 오류처리를 위해 어떤 옵션을 제공하는지 알아보자. 1.1. 전제조건 React Query가 에러를 핸들링하려면 rejected Promise가 필요하다. axios 라이브러리는 4xx 나 5xx 상태코드에서 rejected Promise를 사용해서 문제가 없겠지만, fetch는 4xx나 5xx에서 rejected Promise를 제공하지 않기 때문에, queryFn에서 직접 변환해야한다. 이 부분은 공식문서에서 찾아볼 수 있다. 2. 기본예시 function TodoList() { const todos = useQuery({ queryKey: ['to..

1. 들어가기 Form은 회원가입, 개인정보수정 등 데이터를 업데이트해야 하는 상황에서 자주 쓰인다. 데이터를 가져오는 것(Query), 수정하는 것(Mutation)를 편하게 하기 위해 React Query를 사용한다면, Form과의 통합은 피할 수 없다. 데이터를 변경하고 싶을 때 서버 상태와 클라이언트 상태의 경계가 약간 모호해지기 시작하고, 여기서 복잡하다고 느낄 수 있다. 2. 서버 상태와 클라이언트 상태 비교 서버 상태는 클라이언트가 소유하지 않은 상태로, 비동기 스냅샷 데이터이다. 여기서 비동기는 서버와 통신을 해야 한다는 의미이고, 스냅샷은 서버로부터 응답을 받은 그 시점의 데이터를 의미한다. 클라이언트 상태는 프론트엔드가 모든 권한을 가지고 있고, 동기 정확 데이터이다. useState를..