[TIL] react query - useQuery

0. 주제 선정하게 된 배경 :

로그인 여부(data가 불러와진 상태)를 알고 싶을때 혹은
데이터를 완전히 다 불러오기 전(isLoading)의 상태를 알기 위해서는
useQuery를 사용해야 한다고 해서 해당 사용법에 대해서 공부해보고자 한다.

1. 제대로 알고 넘어가기 :

1-1. react query를 왜 쓰는 걸까?

: 외부에서 가져오는 데이터(상태) 관리하기가 용이하다

1-2. 어떻게 용이하다는 걸까?

const {data, isLoading, error...} = useQuery();

useQuery는 data, isLoading, error 외에도 많은 것들을 제공한다

1. 로딩중인지

2. 에러처리
   : 에러가 생길 경우 에러 객체가 담긴 속성

3. 캐싱
   : 데이터를 자동으로 캐싱해서 동일한 요청이 여러번 있으면 캐싱된 값을 보내준다

4. 갱신과 재로딩
   : useQuery에 전달하는 queryKey에 든 값이 바뀌면 갱신 및 재로딩을 한다

1-3. useQuery 훅 생성

• 예시코드

import {useQuery} from 'react-query';
import * as authApi from './authApi';

function sample () {
	// useQuery 훅을 이용해서 데이터를 가져오기
    const {isLoading, error, data} = useQuery({
    	queryKey: ['user'],
        async queryFn() {
        	const response = await authApi.fetchUser();
            
            if (!response.ok) {
            	throw new Error();
            }
            
            return response.json();
        },
        staleTime: 밀리초 
    })
}

1. queryKey

1. 쿼리 키를 기준으로 데이터를 캐싱함
   : 여러 컴포넌트에서 동일한 쿼리키 값으로 useQuery를 통해 요청을 하면, 캐싱된 값을 반환함.

2. 상태가 변경되는 변수를 queryKey에 넣어주면
   react Query가 자동으로 해당 데이터에 대한 새로운 요청을 보내고,
   새로운 응답을 받을 수 있다 ⭐️ ⭐️ ⭐️

• queryKey는 배열로 사용하기!
  ㄴ 배열에 들어가는 키들은 규칙을 준다면, (스터디원이 알려준 내용) :
  첫 번째는 "상태"를 식별할 수 있는 문자열로,
  두 번째는 상태가 리스트면 "list", 상태가 상세정보라면 "detail"
  세 번째부터는 추가 정보로... (추가 정보가 필수 항목이면 숫자 OR 문자열 / 필수 항목이 아니라면 객체로)

// 필수 항목 예시 
queryKey: ['user', 'list', 104324] // 104324 유저의 리스트
// 필수 항목 아닌 경우 예시
queryKey: ['board', 'detail', { user: 'lee', subject: '제목블라블라' }]

['user', { id: userId }],

2. queryFn

데이터를 가져오는 비동기 함수임 (Promise를 반환해야함)
: 서버로부터 데이터를 받오기 위한 함수. 데이터를 반환해야 함

3. staleTime

: 데이터가 무효해지는 시간

• 정의된 시간 이후에는 캐시된 데이터를 다시 가져와서 갱신

4. enabled

:쿼리를 활성화시킬건지를 결정할 수 있음
값이 변경이 되거나 조건을 만족할때만 쿼리를 활성화시킬 때 사용 (적용해보기 - 커밋 참고하기)

3. 적용해보기

: 직접 useQuery를 만들어본것은 아니지만,
로그인 여부를 판단할 수 있는 걸 가져다가 사용해보았다.

useQuery 사용 : 67749cffbe8baea63cc659df931ddd704d129a6b
+enabled 사용 : f44b8970509009ee34601278ef0599f40b6cb543