RQ - 23. Handling Mutation Response

해당 강의를 참고했습니다.

react-query를 통해서, post 요청을 보내고 응답받은 값을 화면에 보여주고자 할 때 아래와 같이 작업한다. 이 방법의 장점은 1번의 network 요청만 이루어진다는 것 이다.

post 요청과 즉시에 get 요청을 하는 invalidateQueries과는 달리 setQueryData는 저장하고자 하는 값을 서버로 보냄과 동시에 react-query에서 캐싱하고 있는 값을 변경함으로써 새로운 데이터가 화면에 보여진다.

추가되는 값을 클라이언트 단에서 가지고 있기 때문에 가능한 방법이며, 리덕스 썽크 함수에서 dispatch 를 통해 상태를 변경하는 방법하면서 post 요청을 보내는 구성과 비슷하다.

redux-thunk

const __addTodoThunk = async (data) => (dispatch) => {
  try {
    // .. 중략
    await axios.post('/', data)
    dispatch(addTodo(data))
    
  } catch(e){
    // ... 
  }
}

useAddTodo.ts

// fetcher 
const addCard = (cardInfo: TyCard) => {
  return todoApi.addTodo(cardInfo);
};


// hook
export const useAddCard = () => {
  const queryClient = useQueryClient();
  return useMutation(addCard, {
    onSuccess: ({ data }: { data: TyCard }) => {
      queryClient.setQueryData<TyCard[] | undefined>("allTodos", (preCache) => {
        if (!preCache) return;
        return [...preCache, data];
      });
    },
  });
};

get 이 아닌 post는 useQuery말고 useMutaion을 사용한다. 1번째 파라미터에는 'key'가 들어가고 2번째 파라미터는 fetcter, 3번째 파라미터에는 options이 들어간다. react-query에서 제공하는 api를 사용하기 위해 useQeuryClient를 사용했다.

useQueryClient Document

Todos.tsx

// ... 중략
const { mutate } = useAddCard();

// ... 중략
const onSubmitHandler = useCallback(
    (e) => {
      e.preventDefault();
      mutate(card);
    },
    [card, mutate]
  );

만든 hook을 사용해보자. useAddCard에서 mutate를 꺼내서 핸들러 안에서 사용한다. 핸들러는 input의 값을 submit 한다.