[ReactQuery] useQuery()와 useMutation()에 대해 알아보자

❓ useQuery()

useQuery() 훅은 원격 데이터 소스(예: API 엔드포인트)에서 데이터를 가져와 애플리케이션의 상태에서 관리하는 데 사용한다. 일반적으로 useQuery는 서버에서 데이터를 가져와 애플리케이션에서 표시해야 할 때 활용되고 데이터 가져오기, 캐싱, 데이터의 업데이트를 자동으로 처리한다.

const { isLoading, error, data } = useQuery('test', queryFn, options);

useQuery() 훅은 인자로 queryKey와 queryFn, options를 인자로 받는다.queryKey와 fetcher는 필수적으로 입력해야하며 options는 선택적으로 입력해도된다.

useQuery() 첫 번째 인자인 queryKey는 쿼리의 고유 식별자이며 문자열, 배열 또는 함수를 비롯한 다양한 유형일 수 있고, 쿼리의 캐시 키를 결정하고 React Query가 캐싱, 다시 가져오기 및 무효화를 관리하도록 도와준다.

두 번째 인자 queryFn은 실제 데이터 가져오기 작업을 수행하는 기능이다.  queryFn은 필요할 때 React Query에 의해 자동으로 호출되며 Promise 또는 비동기 함수를 반환해야 한다.
세 번째 인자 options은 쿼리에 대한 구성 옵션을 나타낸다. options에 사용되는 설정 값과 반환되는 프로퍼티들은 (공식 문서) 참고하자 !

 

** 기본적으로 많이(?) 사용하는 옵션들은 다음과 같다

enable: 데이터 자동패치 여부. 기본값은 true.
retry : 데이터 재요청 여부 및 횟수. 기본값은 false이며, true의 기본 재요청 횟수는 3회.
retryNumber: 재요청까지 대기시간을 설정 가능. 기본값은 0.
staleTime : 데이터가 fresh 상태로 유지되는 시간. 설정시간이 지나면 stale이 되며, 기본값은 0.
cacheTime : inactive 상태인 캐시 데이터가 메모리에 남아있는 시간. 해당 시간이 초과되면 가비지 컬렉터에 의해 메모리에서 제거되며, 기본값은 5분. (브라우저의 캐시 비우기와 연관됨)
refetchOnMount, refetchOnWindowFocus, refetchOnReconnect: 쿼리가 stale 상태인 경우에 각각 마운트 시, 브라우저 창 포커싱 시, 네트워크 연결 시 refetch 실행여부이다. 기본값은 true.
refetchInterval : refetch가 발생하는 간격을 설정. 기본값은 false.
onSuccess() : 데이터 fetch 성공 시 실행되는 콜백. 매개변수는 response 데이터가 들어있다.
onError() : 데이터 fetch 실패 시 실행되는 콜백. 매개변수는 Error 정보가 들어있다.
onSettled() : 데이터 fetch 완료 시 실행되는 콜백. 성공/실패 여부와 상관없이 실행.
등등

 

🤔 예제를 살펴보기전에 queryKey에 대해서 간단하게 짚고가자 🤔

queryKey는 고유한 값이어야 하며 문자열, 배열 또는 객체일 수 있다.

배열이 queryKey로 사용되는 경우 요소의 순서가 중요하다. 값은 같지만 순서가 다른 두 개의 배열은 별개의 queryKey 값으로 취급되어 별도의 데이터 가져오기 및 캐싱 작업이 발생한다.
마찬가지로 객체가 queryKey로 사용되는 경우 개체 속성의 순서도 중요하다. 속성의 순서를 변경하면 React Query가 객체를 다른 queryKey 값으로 간주하게 된다.
일관성을 유지하고 혼동을 방지하려면 queryKey 값에 대해 안정적이고 예측 가능한 표현을 사용하는 것이 좋다. 이는 가능한 경우 배열 요소 또는 객체 속성의 순서에 의존하지 않는 것을 의미한다.
요약하자면, queryKey가 배열인 경우 고유해야 하며 요소의 순서가 중요하고, queryKey가 객체인 경우 고유해야 하며 속성의 순서도 중요하다.

✔ useQuery() 예제

import { useQuery } from 'react-query';

function BlogList() {
  //fetchPosts 함수는 서버에서 게시물을 검색하기 위한 비동기 함수를 나타냅니다.
  const { data, isLoading, error } = useQuery('posts', fetchPosts);

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

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>Blog Posts</h2>
      {data.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

위의 예에서 useQuery()를 사용하여 쿼리 키 'posts'를 사용하여 블로그 게시물 목록을 가져오도록 하는 예제이다.

❓ useMutation()

useMutation() 훅은 원격 데이터 소스로 변형(mutation) 요청(예: 생성, 업데이트, 삭제 작업)을 보내고 결과 데이터 및 상태 변경을 관리하는 데 사용한다. 보통 useMutation()은 사용자 생성 또는 기존 엔티티 업데이트 등의 데이터 변형 작업을 수행해야 할 때 활용되고 변형 요청, 캐싱, 데이터의 업데이트를 자동으로 처리한다.

const { data, isLoading, mutate } = useMutation(mutationFn, options);

useMutation() 훅은 인자로 mutationFn(mutate를 위한 함수)과 options을 인자로 받는다.
mutationFn은 필수적으로 입력해야하며 options는 선택적으로 입력해도된다.

** useMutation()은 useQuery() 처럼 queryKey값이 존재하지 않는다.
useMutation() 첫 번째 인자인 mutationFn 함수는 변형 또는 수정 작업을 수행하는 함수를 나타내고 mutationFn을 전달하여 데이터 생성, 업데이트 또는 삭제 method를 지정할 수 있다.

두 번째 인자인 options은 쿼리에 대한 구성 옵션을 나타낸다. options에 사용되는 설정 값과 반환되는 프로퍼티들은 (공식 문서) 를 참고하자 !

 

** 기본적으로 많이(?) 사용하는 옵션들은 다음과 같다

-> onMutate: mutation 전에 실행되는 함수로, 미리 렌더링 하고자할 때 유용하다. 이 함수가 반환하는 값을 아래 함수들의 context로 사용 가능 하다.
onSuccess: mutation이 성공하고 결과를 전달할 때 실행.
onError:  mutation이 실패했을 시 에러를 전달한다.
onSettled: mutation의 성공/실패 여부와 상관없이 완료됬을 때 실행. 

등등

 

✔ useMutation() 예제

import { useMutation, useQueryClient } from 'react-query';

function AddBlogPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(addPost, {
    onSuccess: () => {
      // 블로그 게시물 목록을 업데이트하기 위해 'posts' 쿼리를 무효화하고 다시 가져온다.
      queryClient.invalidateQueries('posts');
    },
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { title, body } = e.target.elements;

    // 새 블로그 게시물을 추가하기 위해 mutationFn을 호출한다.
    mutation.mutate({ title: title.value, body: body.value });
    e.target.reset();
  };

  return (
    <div>
      <h2>Add New Blog Post</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Title:
          <input type="text" name="title" required />
        </label>
        <br />
        <label>
          Body:
          <textarea name="body" required />
        </label>
        <br />
        <button type="submit" disabled={mutation.isLoading}>
          {mutation.isLoading ? 'Adding...' : 'Add Post'}
        </button>
      </form>
    </div>
  );
}

이 예제에서는 useMutation() 후크를 사용하여 새 블로그 게시물 추가를 처리한다.

addPost 함수는 서버에 새로운 글을 전송하는 비동기 함수를 나타낸다. onSuccess 콜백을 제공하고queryClient.invalidateQueries()를 사용하여 'posts' 쿼리를 무효화하고 다시 가져와 블로그 글 목록을 업데이트한다.

** queryClient.invalidateQueries()에 대해선 참고 링크를 통해 알아보도록 하자 !

 

useQuery()와 useMutation() 후크를 결합하여 useQuery()로 블로그 게시물 목록을 가져와서 표시하고 useMutation()을 사용하여 원활하고 최적화된 방식으로 새 게시물을 추가할 수 있다.

---

참고 : https://abangpa1ace.tistory.com/entry/%EC%9E%91%EC%84%B1%EC%A4%91React-Query-2-Queries%EC%BF%BC%EB%A6%AC?category=927152 

https://abangpa1ace.tistory.com/266