1. useQuery

백엔드에서 데이터를 받아오기 위해서 useQuery를 사용한다.

2. 사용

• api.js

const BASE_URL = '들어갈 api 주소';

export async function getPosts() {
  const response = await fetch(`${BASE_URL}`);
  return await response.json();
}

• 받아올 페이지

import { useQuery } from '@tanstack/react-query';
import { getPosts } from './api';

function Page() {
  const result = useQuery({ queryKey: ['마음대로 설정'], queryFn: getPosts });
  console.log(result); // 데이터 확인

  return <div></div>;
}

export default Page;

• useQuery()가 있는 컴포넌트가 마운트되면 useQuery()의 쿼리 함수인 queryFn()이 자동으로 실행되면서 알아서 데이터를 가져온다.

• queryKey : 받아온 데이터를 캐싱할 수 있고 특정 데이터만 캐싱하도록 queryKey 배열에 값 추가 가능

• queryFn : 백엔드에서부터 데이터를 받아오는 함수를 지정

result 자리에 디스터럭처링으로 { data, error, isLoading, isError, status } 등을 넣어 하위 요소를 가져오기 가능
result의 하위 요소를 가져오려고 (result.data.results[0]) 했을 때 results를 찾을 수 없다고 한다면 옵셔널 체이닝을 사용하면 데이터를 잘 가져온다. (result.data?.results[0])

queryKey의 역할

1) 데이터 캐싱 및 재사용

동일한 queryKey를 사용하는 쿼리는 동일한 데이터로 간주되며, 이는 React Query가 동일한 키를 가진 쿼리의 결과를 캐싱하고 재사용할 수 있게 한다. 이를 통해 동일한 데이터를 여러 번 요청하지 않고, 이미 요청된 데이터를 재사용할 수 있다.

2) 데이터 무효화

특정 데이터를 갱신하거나 무효화할 때 queryKey를 사용. 예를 들어, 데이터가 변경된 후 해당 데이터를 다시 가져와야 할 때 invalidateQueries 메서드를 사용하여 특정 queryKey에 해당하는 데이터를 무효화할 수 있다.

const queryClient = useQueryClient();

// 특정 키에 해당하는 데이터를 무효화
queryClient.invalidateQueries(['key 이름']);

3) 데이터 갱신

쿼리가 성공적으로 실행된 후 데이터를 갱신하는 데 queryKey가 사용. 예를 들어, 새로운 데이터를 추가하거나 업데이트한 후 refetchQueries 메서드를 사용하여 특정 queryKey를 가진 쿼리를 다시 실행할 수 있다.

const queryClient = useQueryClient();

// 특정 키에 해당하는 데이터를 다시 가져오기
queryClient.refetchQueries(['key 이름']);

4) 쿼리 식별

쿼리를 식별하는 고유한 키. 이는 쿼리를 구분하고 관리하는 데 사용된다. 예를 들어, 여러 개의 쿼리가 있을 때 각 쿼리를 구분하여 처리할 수 있다.

3. 리턴 값

1) 데이터(data)

data에는 우리가 백엔드에서 받아온 데이터들이 들어 있다. 리스폰스 바디로 받은 데이터가 객체로 되어 있고, 페이지네이션에 필요한 정보들과 함께 results란 항목에 실제 포스트 데이터가 배열로 들어가 있다.

2) 데이터를 받아온 시간 (dataUpdatedAt)

dataUpdatedAt은 현재의 데이터를 받아온 시간을 나타내는 항목. 이 시간을 기준으로 언제 데이터를 refetch 할 것인지 등을 결정

3) 다양한 상태 정보

isError, isFetched, isPending, isPaused, isSuccess와 같은 다양한 상태 정보도 확인 가능. status가 success면 데이터를 성공적으로 받아왔다는 뜻