[REACT] useQuery 와 useMutation

💡 useQuery

API연동에 특화된 라이브러리로 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줍니다.
반환 값을 활용하여 성공, 실패 처리가 가능합니다. ( isFetching, isLoading, error, state 등 )

 

Status

• isLoading : 현재 데이터 요청 중
• isError : 오류 발생
• isSuccess : 데이터 요청 성공
• data : 요청 성공한 데이터
• refetch : 다시 요청을 시작하는 함수

const Ex = () => {
  const result = useQuery('posts', postData);
  const { data, error, isLoading } = result;

  if (isLoading) return <>Loading...</>;
  if (error) return alert(Error!);

  return <Container>{data}</Container>
}

 

Option

• staleTime
  
  • fresh -> stale 까지의 시간
  • fresh : 데이터 fetch가 막 이루어진 상태
  • stale : not fresh. 오래된 데이터이므로 업데이트가 필요함.
  • fresh 상태에서 unmount 이후 다시 mount 되어도 fetch 하지 않고 fresh 데이터 사용
  • 기본 값은 0, 0 ~ Infinity까지 설정 가능
• cacheTime
  • stale 상태의 데이터가 unmount 된 이후 캐시 데이터가 메모리에 남아있는 시간
  • 시간이 지나면 캐시 데이터는 GC가 수집함
  • 그 전에 다시 mount 된다면 fetch 되는 동안에는 캐시된 데이터 사용
  • 기본 값은 5분, 0 ~ Infinity까지 설정 가능
• refetchOnMount ( boolean | "always" )
  • stale 일 때 마운트 시 refetch 실행 여부
  • 기본 값은 true.
  • always 일 경우 fresh 상태에서도 refetch 한다.
• retry (boolean | number )
  • 쿼리가 실패했을 때 재시도하는 옵션
  • true : 계속 재시도
  • false : 재시도 X
  • number : 그 수 만큼 재시도
  • 기본 값은 3
• enabled
  • true인 경우만 쿼리 실행

const Ex = () => {
  const result = useQuery('posts', postData, { 
    //Options
    enabled: true,
    refetchOnMount: true,
  });
);

 

💡 useMutation

데이터를 생성 / 업데이트 / 삭제할 때 주로 사용합니다.
optimistic update을 활용해서 성공을 예상하며 미리 UI부터 갱신할 수 있습니다.

 

Option

• onMutate: (variables:TVariables) => Promise<TContext|void>|TContext|void
  
  • mutationFn이 실행되기 전에 먼저 실행할 함수입니다.
  • mutation 함수가 전달받은 파라미터가 동일하게 전달됩니다.
  • optimistic update 사용 시 유용한 함수입니다.
  • 여기서 반환된 값은 onError, onSettled 함수에 전달됩니다. 
    
    
• onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise<unknown> | void
  • mutation()이 성공하면 결과를 전달할 때 실행 됩니다.
    • invalidationQueries(QueryKey)로 해당 쿼리를 invalidate 하고 refetch
    • setQueryData로 직접 캐싱된 쿼리 데이터를 수정. (Optimistic Update) refetch가 일어나지 않음.
      
      
• onError: (err: TError, variables: TVariables, context?: TContext) => Promise<unknown> | void
  
  • mutation이 에러를 만났을 때 실행됩니다.
    
    
• onSettled: (data: TData, error: TError, variables: TVariables, context?: TContext) => Promise<unknown> | void
  
  • mutation()의 성공 / 에러 여부에 상관없이 해당 데이터를 전달받습니다. 
    
    
• mutationFn (variables: TVariables) => Promise<TData>
  • Required
  • 비동기 작업을 수행하고 프로미스를 반환하는 함수입니다. (쉽게 말해 api 요청하는 함수)
  • variables 는 mutate가 전달하는 객체입니다.

Return

• mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void
  
  • mutation을 실행시키는 함수입니다.
  • variables 는 mutationFn에 전달하는 객체입니다.

import React from "react";
import axios from "axios";
import { useMutation } from "react-query";

import "./App.css";

function App() {
  const fetchAdd = async (info) => {
    const { data } = await axios.post(`/add`, info);

    return data;
  };

  const { mutate, isLoading, isSuccess, isError } = useMutation(fetchAdd, {
    onMutate: (variables) => {
      // variables : {id: 1}
      console.log("onMutate", variables);
    },
    onError: (error, variables, context) => {
      // error
    },
    onSuccess: (data, variables, context) => {
      console.log("success", data, variables, context);
    },
    onSettled: (data, error, variables, context) => {
      // end
    },
  });

  const handleSubmit = () => {
    // onMutate 실행 => 성공시 onSuccess 실행 => 끝나면 onSettled 실행
    mutate({ id: 1 });
  };
}
export default App;

 

update 이후 Get 요청을 통한 최신화

• react-query 장점으로 Update후에 Get 요청을 자동으로 진행 할 수 있습니다.
• mutation 함수가 성공할 때, unique key를 invalidateQueries에 넣어주면 됩니다.
  • invalidateQueries가 실행되면 해당 Query는 무효화되며 refetching을 시도합니다.
  • 즉 사용자가 새로고침을 하지 않아도 데이터가 갱신 됩니다.

const queryClient = useQueryClient();

const mutation = useMutation(fetch, {
  onSuccess: () => {
    // postTodo가 성공하면 todos로 맵핑된 useQuery api 함수를 실행합니다.
    queryClient.invalidateQueries("key");
  }
});

• 해당 Query에 대해 refetching을 원하지 않고 무효화만 원한다면 refetchActive 옵션을 사용합니다.

queryClient.invalidateQueries("key", {
 refetchActive: false, 
});

 

Optimistic Update

• useMutation이 성공할 것이라 가정하고 미리 화면의 UI를 바꾸고 나서, 결과에 따라 확정 / 롤백하는 방식입니다.
• setQueryData 옵션을 사용합니다.

import React from "react";
import axios from "axios";
import { useMutation } from "react-query";

import "./App.css";

function App() {
  const fetchAdd = async (info) => {
    const { data } = await axios.post(`/add`, info);

    return data;
  };

  const queryClient = useQueryClient();

  const { mutate, isLoading, isSuccess, isError } = useMutation(fetchAdd, {
    onMutate: async (variables) => {
      // 요청한 Query 취소 함수
      // 즉 해당 Query에 대한 refetching을 막는 것 => onMutate에서 수행되는 것들을 덮어쓰지 않기 위해
      await queryClient.cancelQueries("key");

      // 기존 Query를 가져오는 함수 ( 존재하지 않으면 undefinde 반환 )
      const previousValue = queryClient.getQueryData("key");

      if (previousValue) {
        // setQueryData(): Query의 캐시된 데이터를 즉시 업데이트하는 동기 함수 ( Query가 존재하지 않으면 생성 )
        // 전달받은 variables값을 즉시 새로운 데이터로 업데이트
        queryClient.setQueryData("key", (oldData) => [...oldData, variables]);
      }

      // 이전 값 리턴
      return { previousValue };
    },
    onError: (error, variables, context) => {
      if (context?.previousValue) {
        // error가 발생하면 onMutate에서 반환된 값으로 다시 롤백
        queryClient.setQueryData("key", context.previousValue);
      }
    },
    onSuccess: (data, variables, context) => {},
    onSettled: (data, error, variables, context) => {
      // mutation이 완료되면 성공 유무와 관계없이 쿼리를 무효화 시키고 새로 갱신
      queryClient.invalidateQueries("key");
    },
  });

  const handleSubmit = () => {
    // onMutate 실행 => 성공시 onSuccess 실행 => 끝나면 onSettled 실행
    mutate({ id: 1 });
  };
}
export default App;