Tanstack Query 02- Tanstack Query사용법

왜나는 항상 일주일에 한번 포스팅을 하지 못하는가....근데 기획이란게..힘들기함 ㅠㅠ

지난 Tanstack Query 포스팅에 이어 이번엔 사용법을 알아보자!-!

Tanstack Query 사용법

여러가지 기능의 함수를 제공해주지만 많이 쓰이는 함수는 useQuery()와 useMutation()이다.

useQuery

데이터를 조회 할 때 주로 쓰인다.(GET)

const { data } = useQuery({
    queryKey: ['Posts', userId],
    queryFn: () => getPosts()
  })
  
if (isPending) return '로딩 중입니다...';

if (isError) return '에러가 발생했습니다.';

첫번째 인자인 queryKey는 캐시될 데이터의 키값을 배열에 넣어주고
두번째 인자인 queryFn는 프로미스를 반환하는 함수를 넣어줘야 하며 주로 패칭 함수가 들어간다.

상황에 따라 queryKey배열에 키값 뿐만 아니라 상태변화를 감지할 변수를 넣는 경우도 있는데
변수에 상태변화가 일어나면 queryFn를 재실행 하여 새로운 값을 캐시(= refetch)한다.

이때, data 뿐만아니라 isError, isPending 등 여러 값을 꺼내어 사용할 수 있다.

useMutation

데이터 추가, 수정, 삭제 작업을 할 때 주로 쓰인다.(POST, PUT, DELETE)

//useQuery 예제와 별게의 예제 입니다

const queryClient = useQueryClient();

const uploadPost = useMutation({
  mutationFn: (newPost) => uploadNewPost(newPost),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

const handleUploadPost = (newPost) => {
  uploadPost.mutate(newPost, {
    onSuccess: () => console.log("Mutation Success!")
    },
  });
};

useQuery()와 큰 차이점이 있는데 쿼리 함수는 컴포넌트가 마운트되면서 자동으로 실행되지만, useMutation()은 mutationFn 함수를 직접 실행해 줘야 한다.
=> 아마도 useQuery와 달리 useMutation은 바로 실행되는 함수가 아니기 때문에 그렇게 만든게 아닐까??🤔

따라서 이벤트 핸들러 함수를 따로 작성해 주어야 하고 mutate() 메소드로 mutationFn에 등록한 함수를 실행하고
데이터를 실제로 수정할 수 있고 onSuccess에는 해당 요청 응답이 성공적으로 왔을 경우 실행될 콜백함수를 적어주면 된다!

업데이트 데이터 바로 띄우기

데이터는 실제로 수정 됐지만 캐시에 저장된 데이터는 refetch를 하지 않는 이상 과거의 데이터가 그대로 저장되어 있기 때문에
업데이트된 데이터가 화면에 바로 나타나지 않는다. 이때 새로고침 없이 바뀐 데이터를 띄울수 있는 방법이 있는데 바로 invalidateQueries()이다.

invalidateQueries()는 캐시에 있는 모든 쿼리 혹은 특정 쿼리들을 무효화 시키는 기능으로 쿼리를 통해 받아 온 데이터를
stale time에 상관없이 무조건 stale 상태로 만들고, 해당 데이터를 백그라운드에서 refetch하기 때문에 바뀐정보를 바로 화면에 띄울수 있다!