TanStack-Query Quick Start

TanStack Query 패키지 설치

yarn add @tanstack/react-query

GET 요청 (useQuery)

fetch 함수 활용

// GET 요청할 컴포넌트 또는 최상단 컴포넌트

// App.jsx

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

const apiUrl = '~~~';

function App() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
          throw new Error('API 호출 불가');
        }
        const data = await response.json();
        return data;
      } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
      }
    },
  });

  console.log(data);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

Axios 활용 (1)

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const apiUrl = '~~~';

function App() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      try {
        const response = await axios.get(apiUrl);
        return response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
      }
    },
  });

  console.log(data);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

Axios 활용 (2) : 인스턴스로 분리

// baseURL 별도 인스턴스 파일로 분리

// api.js

import axios from 'axios';

const api = axios.create({
    baseURL: '~~~',
    timeout: 5000,
})


export default api;

// App.jsx

import { useQuery } from '@tanstack/react-query';
import api from '../api';  // api 인스턴스 가져오기

function App() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['data'],
    queryFn: async () => {
      try {
        const response = await api.get('/');
        return response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
      }
    },
  });

  console.log(data);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

자식 컴포넌트에서 전역 상태 사용하기

// 자식 컴포넌트

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

function SponsorList() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['data'], // App 컴포넌트에서 만든 useQuery의 쿼리 키를 호출하는 것.
  });

  console.log('SponsorList Data:', data);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  ...