Apollo useMutation - Refetching queries

아폴로 공식문서가 설명이 잘 되어 있다.

Updating local data

mutation을 사용했다면, DB의 데이터를 변경한 것이다.

이를 다시 UI에 반영하기 위해서 가장 간단한 방법은 muation의 영향을 받은 query를 refetch 하는 것이다.

하지만 이는 추가 네트워크 요청을 뜻한다.

 

만약! mutation이 수정된 필드를 돌려준다면 (응답객체처럼), 우린 추가 네트워크 요청 없이도 캐시를 직접 업데이트 할 수 있다.

 

지금부터 안내하는 방법들을 통해 우리가 개발하는 App의 반응성을 향상 시킬 수 있다.

 

Refetching queries

mutation 이후 query를 refetch 하고 싶다면, useMutation에 refetchQueries 배열을 추가 옵션으로 포함시키면 된다.

아폴로 공식문서

addTodo 함수 사용 예시는 다음과 같다.

아폴로 공식문서

 

아폴로 공식문서 에 설명이 아주 잘 나와 있다.

 

그대로 따라했다.

//addPoem 함수가 실행 된 후, 자동으로 다시 query요청을 한다.
// 즉, 게시글을 작성한 후 다시 전체 게시글을 읽어오는 쿼리요청을 하여 UI를 업데이트함
  const [addPoem, { data, loading, error }] = useMutation(CREATE_POEMS, {
    refetchQueries: [GET_POEMS, "Poems"],
  });
  
  ..
  
  //onSubmit 함수
   const createPoemFunc = async (e: React.FormEvent<HTMLElement>) => {
    e.preventDefault();
    addPoem({ variables: poemInfo });
  };
  
  ...
  
  return (
  	...
    <form onSubmit={(e) => createPoemFunc(e)}>
    ...
    )

 

게시글을 Create한 후 자동으로 refetchQuery된다.