[React] Tanstack 쿼리

1.특징 

- Http 요청을 전송하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리

- 코드가 매우 간결, 고급 기능이 Build in 되어있음

- 즉각적인 결과와 업데이트된 데이터를 빠르게 얻을 수 있음

주의

- Http 를 전송하는 로직이 내장되어 있지 않음 > 직접 코드 작성 해야 함

- 대신 요청을 관리하는 로직을 제공(요청 관련 데이터, 발생 가능한 오류를 추적)

 

2. 사용방법

App.jsx

function App() {

  return (

    <QueryClientProvider client={queryClient}>

      <RouterProvider router={router} />

    </QueryClientProvider>

  );

}

 

 

사용하는 컴포넌트

 const { data, isPending, isError, error } = useQuery({

    queryKey: ["events"],

    queryFn: fetchEvents,

 

  });

 

useQuery 

- http요청을 전송 

- 섹션에 필요한 이벤트 데이터를 가져옴

- 로딩 상태에 대한 정보 제공

 

- queryFn : 실제 요청을 전송할 때 실행할 실제 코드를 정의 

> 여기서 정의한 이 쿼리 함수에 기본 데이터를 전달

> signal : 요청이 완료되기 전에 사용자가 페이지 나가면 요청 취소 >등록한 함수의 fetch에 await fetch("http://localhost:3000/events".{signal:signal});

이런식으로 전달하면 사용자가 페이지를 나갔을 때 취소 요청이 됨.

 

- queryKey

- queryKey : 모든 쿼리, 전송하는 모든 fetch 요청은 쿼리 키를 통해 요청으로 생성된 데이터를 캐시 처리함

  > 다시 재 요청을 할 때 이전 요청의 응답 재사용 가능(그와 동시에 다시 요청을 전송해서 업데이트가 된 데이터가 있는지 확인)

 

-enable : 요청 전송 가능, 불가능

  >  데이터를 저장하고 재사용하는 기간을 구성 가능

  > 리액트 쿼리는 쿼리키를 내부적으로 저장 

  > 키는 값이 여러개 일 수 있고 유형이 문자열로 제한되지 않음 

 

 - data : 실제 응답 데이터가 값으로 들어있음(queryFn에 등록한 함수에 의해 반환)

> 쿼리 실행이 완료되면 결국 data 프로퍼티에 값으로 전달

> 요청 전송 후 응답이 있을 때까지 기다려야 함

 

- isPending : 요청이 여전히 실행 중인지, 응답 받았는지 알려줌

- isLoading : isPending  과 다르게 쿼리가 비활성화 되었다고 해서 true가 되지 않음

 

- isError : 오류 응답 받은 경우 true

> 잘못된 응답이 반환된 경우 오류가 반환되도록 queryFn 함수 내에 설정

 

- error : 발생한 오류에 대한 정보가 포함된 프로퍼티

- refetch : 사용자가 버튼을 눌렀을 때 동일한 쿼리를 다시 전송할 수 있게 

 

- staleTime 기본값 0 : 업데이트 된 데이터를 가져오기 위한 요청을 자체적으로 전송하기 전에 기다릴 시간 설정

 > 0인경우 : 캐시된 데이터를 사용하지만 업데이트 된 데이터를 가져오기 위한 자체적인 요청을 항상 전송

 > 5000 인 경우 : 5000밀리초 동안 기다린 후에 추가 요청을 보냄(5초안에 다시 컴포넌트를 렌더링하고 동일한 요청을 전송해야 할 떄 리액트 쿼리는 요청을 전송하지 않음)

> ex) 다른 페이지를 갔다가 5초 내에 돌아오면 요청 전송 X

> ex) 다른 페이지를 갔다가 5초 이후에 돌아오면 요청 전송

 

- gcTime : 가비지 컬렉션 타임

> 데이터와 캐시를 얼마나 오랫동안 보관할지기본값 5분

 

 

동적 쿼리 생성

import { useRef } from "react";

import { fetchEvents } from "../../util/http";

export default function FindEventSection() {

  const searchElement = useRef();

  const [searchTerm, setSearchTerm] = useState();

  const {data, isLoading,isPending, isError, error} = useQuery({

    queryKey: ["events", { search: searchTerm }],

    queryFn: (signal) => fetchEvents({signal,searchTerm}),

    enable: searchTerm!==undefined

  });

  function handleSubmit(event) {

    event.preventDefault();

    setSearchTerm(searchElement.current.value);

  }

  return (

    <section className="content-section" id="all-events-section">

      <header>

        <h2>Find your next event!</h2>

        <form onSubmit={handleSubmit} id="search-form">

          <input

            type="search"

            placeholder="Search events"

            ref={searchElement}

          />

          <button>Search</button>

        </form>

      </header>

      <p>Please enter a search term and to find events.</p>

    </section>

  );

}

 

export async function fetchEvents({signal,searchTerm}) {

  const response = await fetch("http://localhost:3000/events".{signal:signal});

  if (!response.ok) {

    const error = new Error("An error occurred while fetching the events");

    error.code = response.status;

    error.info = await response.json();

    throw error;

  }

  const { events } = await response.json();

  return events;

}