Tanstack react-query

staleTime

가져온 데이터가 오래되었다고 판단하는 기준 시간 [ms]

기본 값은 0 이다.

 

staleTime : 0

- 데이터를 가져온 즉시 오래된 데이터로 인식함.

- 캐시된 데이터를 우선 사용하고 API 를 재 호출하여 새 응답으로 데이터를 교체

 

stateTime : 3000

최초 요청 이후 데이터를 다시 요청한다고 가정함.

- 3초 이전에 데이터 요청하면, 최신 데이터라고 판단. 이전에 캐시된 데이터를 사용

- 3초 이후에 데이터 요청하면 캐시된 데이터를 우선 사용하고 API 를 재 호출하여 새 응답으로 데이터를 교체

 

쿼리 무효화 (queryClient.invalidateQueries)

get - list

post - add something

and update list by queryClient.invalidateQueries

 

Mutation 과 함께 사용되는 경우가 많음

post로 어떤 값을 추가한 뒤 리스트를 다시 패치하는 것.

쿼리를 무효화 해서 데이터를 다시 가져온다.

 

// 모든 쿼리 키에 대한 캐시를 무효화
queryClient.invalidateQueries()

// 특정 쿼리 무효화
queryClient.invalidateQueries({ queryKey: ['적용시키고 싶은 쿼리 키 이름'] })

// 파라미터가 필요한 특정 쿼리 무효화
queryClient.invalidateQueries({ ['적용시키고 싶은 쿼리 키 이름', 필요한 파라미터 값] })

 

import { useMutation, useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

const mutation = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

 

useQuery - enabled 옵션

useQuery를 사용하면 화면이 마운트 되면서 자동으로 쿼리함수를 실행하여 비동기 데이터를 가져온다.

 

이때 enabled 옵션을 false로 설정하면 자동으로 가져오는 것을 방지 할 수 있다.

 

import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";

const QueryEnable = () => {
  const [isEnable, setEnable] = useState(false);
  const { data } = useQuery({
    queryKey: ["project"],
    queryFn: () => {
      return new Promise((resolve) => {
        setTimeout(() => resolve([1, 2, 3, 4, 5, 6]), 2000);
      });
    },
    enabled: isEnable
  });

  return (
    <div>
      <div>{data?.join(",")}</div>
       <button
         onClick={() => { setEnable(true); }}
       >
         call
       </button>
    </div>
  );
};

export default QueryEnable;

 

 

https://beomy.github.io/tech/react/tanstack-query-v4/

[React] TanStack Query v4 (React Query)