[React] Tanstack 쿼리 , POST

POST

 

컴포넌트 내

 const { mutate } = useMutation({
    mutationFn: createNewEvent,
    onSuccess: () => {
      queryClient.invalidateQueries({queryKey:"events"});
      // 정확하게 key가 일치해야하는 경우
      // queryClient.invalidateQueries({queryKey:"events",exact:true}); 
      
      navigate("/events");
    },
  });

  function handleSubmit(formData) {
    mutate({ event: formData });
  }

 

createNewEvent 함수

import { QueryClient } from "@tanstack/react-query";
export const queryClient = new QueryClient();

export async function createNewEvent(eventData) {
  const response = await fetch(`http://localhost:3000/events`, {
    method: "POST",
    body: JSON.stringify(eventData),
    headers: {
      "Content-Type": "application/json",
    },
  });

  if (!response.ok) {
    const error = new Error("An error occurred while creating the event");
    error.code = response.status;
    error.info = await response.json();
    throw error;
  }

  const { event } = await response.json();

  return event;
}

 

1. useMutation 

- 필요할 때만 전송 가능

- mutationKey : 응답 데이터를 캐시 처리 하지 않기 때문에 필수로 필요하지 않음

- mutationFn: 실행 함수

- onSuccess : request 가 성공했을 때 실행할 함수

 

- 응답 객체

   -> data : 전송된 요청의 응답으로 반환된

   -> mutate : 어디서든 이 함수를 호출해 요청을 전송할 수 있음, 언제 함수를 실행할 것인지 지정

   -> isPending : 전송 상태

   -> isError : error 상태

   -> error : 상태

   

 

 

2. queryClient.invalidateQueries();

- 현재 화면에 표시된 컴포넌트와 관련된 쿼리가 실행된 경우 특정쿼리 데이터가 오래됐으니 만료로 표시하고 즉시 다시 가져오기를 트리거

- queryKey가 포함된 모든 쿼리를 무효화 시킴, key가 완전히 같을 필요 X

- exact: true를 추가하면 정확히 key가 일치하는 쿼리만 무효화

- refetchType: 'none' 기존 쿼리가 즉시 자동으로 트리거되지 않고 다음번에 요청될 때 다시 실행됨

- onMutate : mutate를 호출하는 즉시 실행됨. 프로세스가 완료되기 전에 응답 받기 전에 실행, 

리액트 쿼리에 의해 캐시된 데이터를 업데이트 하려고 함.

- onSettle : 성공여부와 상관 없이 mutation이 완료될 때마다 호출 

 

- setQueryData 

  =>  쿼리 key, 

   => 일반적으로 캐시되는 새 응답을 받을 때마다 리액트 쿼리에서 수정

   =>  setQueryData를 통해 직접 저장된 데이터를 수정할 수 있음 

 

- cancelQueries();

 => 특정키의 모든 활성 쿼리를 취소

=> 해당키에 대해 나가는 쿼리가 있는 경우 해당 쿼리가 취소 되도록 함

 

-getQueryData()

=> 현재 저장된 쿼리 데이터를 가져오고 이를 실행한 다음에 새 데이터로 설정

 

해당쿼리의 응답데이터와 setQueryData 로 업데이트 된 데이터가 충돌나지 않도록 함

 

 

---

*queryFn에 파라미터로 queryKey 가져오는 방법

 

export default function TestComponents(){
	const {data, isPending, isError, error} = useQuery({
    	queryKey : ['events',{max:3}],
        queryFn:({signal, queryKey}) => fetchEvents({signal, ...queryKey[1]}),
        staleTime: 5000,
    })

}