먼저, 쿼리란?

'문의하다', '질문하다' 라는 뜻을 가진 단어. 데이터베이스에 필요한 데이터를 요청하는 것. useQuery()는 필요한 데이터를 백엔드에 요청해서 받아오는 React Hook이다.

useQuery()

1. 백엔드에서 데이터를 받아 올 함수 생성

// src/api.js
const BASE_URL = 'https://learn.codeit.kr/api/codestudit';

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

2. useQuery()를 import 후 실행

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

function HomePage() {
  const result = useQuery({ queryKey: ['posts'], queryFn: getPosts });
  console.log(result);

  return <div>홈페이지</div>;
}

export default HomePage;

useQuery() 리턴 값

useQuery 훅의 리턴 값에 많은 것들이 들어있다... 자주 사용할 몇 가지 알아보기.

데이터

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

데이터를 받아온 시간

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

다양한 상태 정보

isError, isFetched, isPending, isPaused, isSuccess와 같은 다양한 상태 정보도 확인해 볼 수 있다. status라는 항목에는 success라고 적혀있으면 데이터를 성공적으로 받아왔다는 뜻!

그 외에도 fetchStatus, isStale, isPlaceholderData 등등 ...