안녕하세요. 휴먼스케이프 Hugh 입니다.
지난 번 포스팅에서는 Apollo, graphQL 가 무엇인지, 우리와 같은 react 환경에서 Apollo client의 query 를 이용하여 data fetching은 어떻게 하는지에 대해 알아보았습니다. 오늘은 지난 시간에 잠깐 언급했던 mutation에 대해서 알아보겠습니다.
포스팅의 내용은 아래 순서로 구성됩니다.
mutation 이란?
mutation 사용해보기
mutation 이란?
지난 시간에 배웠던 query는 graphQL 서버로 data fetching 요청만이 가능합니다. graphQL 서버로 데이터 쓰기나 업데이트 요청을 하려면 mutation 을 사용해야 합니다. 지난 시간에 query를 요청할 때에는 useQuery hooks를 사용했는데, mutation을 요청하려면 useMutation hooks를 사용해야 합니다. useQuery의 경우 기본적으로 컴포넌트가 렌더링 될 때 실행이 되지만, useMutation의 경우 렌더링 시점이 아닌, 원하는 액션이 발생했을 때 실행하도록 되어있습니다.
mutation 사용해보기
실습환경은 지난 번 포스팅과 마찬가지로 react app 앱에 apollo client를 실행하기 위한 라이브러리들이 설치되어 있어야 하고, apollo client instance가 앱을 감싸고 있는 형태가 되어야 합니다.
오늘 실습으로 만들 앱은 친숙한 to do list를 관리하는 앱이고, 서버 역시 여기 준비되어 있습니다.
useMutation hooks를 사용 방법은 지난 시간에 알아 보았던 useQuery hooks와 매우 비슷합니다. useMutation hooks를 사용하기 전에 아래와 같이 query문과 마찬가지로 `` 으로 감싼 gql 함수로 mutation을 정의합니다.
다음 위의 mutation문을 실행하기 위한 AddTodo 컴포넌트를 생성하고 useMutation hooks 를 사용해 보겠습니다.
위 코드를 보면 useMutation의 인자로 우리가 정의했던 mutation 문을 넘겨주었고, addTodo함수와 data를 리턴받았습니다. 앞에서 설명했듯이 useMutation은 컴포넌트가 렌더링 될 때 바로 실행되지 않고, 원할 때 사용할 수 있는 mutation funtion을 포함한 tuple을 리턴해줍니다. 리턴해주는 tuple에는 useQuery hooks와 마찬가지로 data, error, loading과 같이 mutation의 상태를 나타내는 것들이 포함되어 있습니다.
위 코드에서는 mutation funtion을 버튼 이벤트로 주었습니다. useMutation도 useQuery와 마찬가지로 두 번째 인자로 여러가지 옵션 값들을 설정할 수 있는데, 위 코드에서는 mutation function의 인자로 옵션을 설정해준 것을 볼 수 있습니다. 이 경우 mutation function의 옵션 값이 우선으로 적용됩니다.
여기까지 쓰기를 했고 이제 업데이트를 해 볼 차례입니다. 쓰기와 마찬가지로 업데이트를 위한 mutation 문을 정의합니다.
다음은 업데이트 mutation 문의 사용을 위해 Todos 컴포넌트를 생성하고, mutation function을 사용해 보겠습니다.
업데이트 mutation function은 서버의 데이터를 변경합니다. 물론 이미 클라이언트의 렌더링 되어 있는 값도 업데이트 시켜주어야 합니다. 그러기 위해선 mutation function은 변경된 데이터와 함께 반드시 id 값을 리턴해주어야 합니다. Apollo client는 id를 기반으로 자동으로 업데이트 시켜줍니다.(지난 주에 언급했던 caching 데이터도 자동으로 업데이트)
하지만 위와 같이 단일 건이 아닌, 여러 건의 entity를 수정, 생성, 삭제를 하게 되면 자동으로 업데이트 시키지 못 합니다. 이 경우 useMutation hooks의 update function 을 정의해주어야 합니다.
이를 위해서 앞에서 작성했던 Add_TODO를 인자로 넘겨주었던 useMutation hooks에 update function을 아래와 같이 추가해줍니다.
update function의 인자로는 cache 오브젝트와 mutation 된 데이터를 줍니다. cache 오브젝트의 readQuery, writeQuery 함수를 제공하여 caching 데이터에 쿼리를 할 수 있도록 해줍니다. 위 update funtion에서는 mutation이 발생하면, 기존의 caching 데이터에 새로운 todo를 더해주고 있고 해당 데이터를 사용하는 컴포넌트는 새로운 데이터로 업데이트 됩니다.
여기까지 mutation에 대해서 알아보았고, 예제 코드의 완성본은 아래와 같습니다.
감사합니다.
Get to know us better! Join our official channels below.
Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io
가입하기
