tanstack-react-query (useQuery, useMutation.mutate)

 

   tanstack-react-query 의 useQuery, useMutation 사용하기 (기본)

아래의 API 들을 반환하는 비동기 함수들을 각각 useQuery, useMutation으로 불러와서 사용해 보자

// promise-then
const fetchGetTodos = async (userId = 1) => {
  return fetch(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`)
    .then((response) => response.json())
    .then((json) => json);
};

// async-await
const fetchPostTodos = async (
  posts: any = { title: "foo", body: "bar", userId: 1 }
) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos`, {
    method: "POST",
    body: JSON.stringify(posts),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  });
  return await response.json();
};

const queries = {
  fetchGetTodos,
  fetchPostTodos
};

export default queries;

 

파일구조)

 

tanstack을 사용하기 위해서는 QueryClient 객체로 감싸져있어야 하며(App => Example)

Get Method는 useQuery, Post Method는 useMutation 으로 각각 호출하여 사용하였다.

써보니 별도의 state사용할 필요 없이 바로 Destructuring assignment 하여 사용할 수 있기때문에, 이런점은 큰 장점인것 같다.

예를 들어, 로딩 중인지의 여부와 데이터 바인딩의 여부도 useEffect로 감지하면 바로 알 수 있기 때문이다.

 

예제 작성)

 

   tanstack-react-query 의 useQuery를 사용할 때, 호출 시점을 수동으로 관리하기

 

useQuery를 사용하여 데이터를 요청하는 시점을 조절하려면 enabled 옵션을 활용할 수 있다

기본적으로 enabled 옵션은 true로 설정되어 있어 컴포넌트가 마운트될 때 자동으로 데이터를 가져온다

 

그러나 이 옵션을 false로 설정하면 컴포넌트가 마운트될 때 데이터를 요청하지 않도록 할 수 있다

이후 원하는 시점에 refetch 메서드를 호출하여 데이터를 수동으로 요청할 수 있다

예를 들어, 다음과 같이 enabled 옵션을 사용하여 useQuery 훅을 호출하고 데이터를 수동으로 요청할 수 있다

import { useQuery } from 'react-query';

function MyComponent() {
  const { data, isLoading, refetch } = useQuery('myQueryKey', fetchDataFunction, {
    enabled: false, // 이 옵션을 사용하여 초기에 데이터를 가져오지 않도록 설정
  });

  // 데이터를 원하는 시점에 요청
  const handleButtonClick = () => {
    refetch();
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Fetch Data</button>
      <div>{data}</div>
    </div>
  );
}

이렇게 하면 컴포넌트가 처음 렌더링될 때 데이터를 요청하지 않고, 버튼 클릭 또는 다른 이벤트를 사용하여 

refetch 메서드를 호출하여 데이터를 가져올 수 있습니다. 

수동제어는 데이터를 원하는 시점(사용자의 이벤트에 의해)에 로드하고 관리할 때 사용할 수 있는 방법이다