TanStack Query - (3) useQuery로 데이터 패칭하기

🪄 useQuery로 데이터 패칭하기

이번 포스트에서는 TanStack Query의 핵심 훅인 useQuery를 사용해서 실제로 Supabase에서 캐빈 데이터를 불러와 보겠습니다. 아래는 CabinTable 컴포넌트 코드입니다.

🔍 useQuery란?

useQuery는 React 컴포넌트 안에서 서버의 데이터를 쉽게 가져오고, 로딩 상태, 에러 처리, 캐싱까지 자동으로 관리해주는 훅입니다. 기본적인 사용법은 아래와 같습니다

 

const { data, isLoading, error } = useQuery({
  queryKey: ["key"],
  queryFn: fetchFunction,
});

 

 

import { useQuery } from "@tanstack/react-query";
import styled from "styled-components";
import { getCabins } from "../../services/apiCabins";
import Spinner from "../../ui/Spinner";
import CabinRow from "./CabinRow";

const Table = styled.div`
  border: 1px solid var(--color-grey-200);

  font-size: 1.4rem;
  background-color: var(--color-grey-0);
  border-radius: 7px;
  overflow: hidden;
`;

const TableHeader = styled.header`
  display: grid;
  grid-template-columns: 0.6fr 1.8fr 2.2fr 1fr 1fr 1fr;
  column-gap: 2.4rem;
  align-items: center;

  background-color: var(--color-grey-50);
  border-bottom: 1px solid var(--color-grey-100);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  color: var(--color-grey-600);
  padding: 1.6rem 2.4rem;
`;

function CabinTable() {
  const {
    isLoading,
    data: cabins,
    error,
  } = useQuery({
    queryKey: ["cabin"],
    queryFn: getCabins,
  });

  if (isLoading) return <Spinner />;

  return (
    <Table role='rable'>
      <TableHeader role='row'>
        <div></div>
        <div>Cabin</div>
        <div>Capacity</div>
        <div>Price</div>
        <div>Discount</div>
        <div></div>
      </TableHeader>
      {cabins.map((cabin) => (
        <CabinRow cabin={cabin} key={cabin.id} />
      ))}
    </Table>
  );
}

export default CabinTable;

import supabase from "./supabase";

export async function getCabins() {
  const { data, error } = await supabase.from("cabins").select("*");

  if (error) {
    console.error(error);
    throw new Error("Cabins could not be loaded");
  }

  return data;
}

 

🧩 queryKey와 queryFn

• queryKey: 이 쿼리의 고유한 키입니다. 캐싱의 기준이 되기 때문에 동일한 key를 가진 쿼리는 데이터를 공유합니다. 위 예제에서는 "cabin"이라는 key를 사용하고 있습니다.
• queryFn: 실제 데이터를 불러오는 함수입니다. 여기서는 Supabase에서 데이터를 가져오는 getCabins 함수가 사용됩니다.

 

🌀 isLoading, data, error

useQuery는 다양한 상태 값을 제공합니다:

• isLoading: 데이터를 처음 불러오는 중일 때 true가 됩니다. 이때는 <Spinner />를 보여주도록 처리했습니다.
• data: 서버에서 받아온 실제 데이터입니다. 여기서는 캐빈 객체 배열이 들어오게 됩니다.
• error: 데이터를 불러오는 데 실패했을 경우 에러 객체가 들어옵니다.

 

페이지 최초 접속시 로딩 스피너가 표시되지만 접속후에는 데이터를 패칭하지않고 캐싱된 데이터를 그대로 가져옴

 

 

 

🧠 staleTime과 캐싱 기능

TanStack Query는 기본적으로 캐싱 기능을 가지고 있습니다. 덕분에 동일한 queryKey를 가진 쿼리는 다시 요청하지 않고 캐시된 데이터를 그대로 보여줍니다. 이 기능 덕분에 처음 페이지에 접속할 때만 데이터를 fetching하고, 이후에는 네트워크 요청 없이 빠르게 데이터를 사용할 수 있죠.

기본 설정에서 staleTime은 0이지만, 원하는 경우 아래처럼 조정해서 캐시 유지 시간을 설정할 수 있습니다 

staleTime을 설정하면 설정한 시간이 지난뒤 데이터를 다시 fetching합니다