[TIL] query, mutation

Query

 

React Query는 API에서 데이터를 가져와서 사용자에게 표시하는데 사용되는 주로 GET 요청과 같은 읽기 전용 작업에 적합하고, 자동으로 서버 데이터를 캐시하고, 데이터를 재요청하며, 브라우저 창을 다시 포커스를 맞추었을 때 , stale 데이터를 refresh하는 등의 작업을 수행한다.

 

React Query의 사용 목적은 UI 등의 어플리케이션에서만 필요한 데이터를 Client State로 규정짓고, 서버에서 받아오는 데이터를 Server State로 규정지어 클라이언트 / 서버 상태를 나누어서 생각할 수 있게 도와주기 때문에 사용한다.

 

 

Mutation

Mutation은 '변형'이라는 뜻을 말하고, 서버의 상태를 "변경"하는데 사용된다. 즉, POST(생성) / PUT(수정) / DELETE(삭제) 등과 같은 작업에 사용된다.

새로운 할 일을 추가하는 addTodo 작업은 서버의 상태를 변경하는 작업이므로 useMutation을 사용해야 한다.

 

단, mutation은 데이터를 캐시하거나 자동으로 재요청하는 것과 같은 useQuery가 하는 작업을 수행하지 않는다.

대신 변형이 완료된 후에 다른 쿼리를 무효화하거나 repatch하는데 사용할 수 있는 콜백을 제공한다.

 

 

export function App() {
	// mount 즉시 서버와 통신 후 데이터를 받아온다.
    const { GetData } = useQuery({ queryKey: ['todoData'], queryFn: getTodos });
    
    // mutation 객체 생성 -> 이벤트가 일어났을 때 사용함
    const mutation = useMutation({ mutationFn: updateTodos });
   
}

 

 

query는 hook으로 선언만 해두면 컴포넌트가 mount 될 때 즉시 실행되어 서버에서 데이터를 조회하고 데이터를 가져온다. 

query는 상태 변경을 발생시키지 않으며, 순수하게 데이터를 요청하고 가져오는 역할을 수행한다.

 

반면에 mutation은 컴포넌트가 mount 될 때 실행되지 않고, useMutation hook을 사용해서 mutation 객체를 가져오고, 필요할 때 호출하도록 한다.  상태를 업데이트하는 명령형으로 작업이 수행된다.