쿼리 refetch 하기 (refetch, refetchQuries)

 

1. refetch 함수 사용

 

refetch는 useQuery의 리턴값중 하나이다. 이름 그대로 데이터를 다시 fetch하는 함수 이다.

 

공식문서에 자세히 설명되어 있다! (아폴로는 공식문서가 읽기 편해서 좋은듯. )

 

 

 

동일한 variables를 사용했을 시 fetchPolicy에 의해 cache를 가져와 동일한 값을 불러오는 것을 방지하기 위해 refetch는

network-only가 default 이다.

 

예시는 공식문서에 나와있는 코드를 대신한다.

 

const DogPhoto = ({ breed }) => (
  <Query query={GET_DOG_PHOTO} variables={{ breed }} skip={!breed}>
    {({ loading, error, data, refetch }) => {
      if (loading) return null;
      if (error) return `Error! ${error}`;

      return (
        <div>
          <img
            src={data.dog.displayImage}
            style={{ height: 100, width: 100 }}
          />
          //버튼 클릭시 GET_DOG_PHOTO 쿼리를 다시 실행한다.
          <button onClick={() => refetch()}>Refetch!</button>
        </div>
      );
    }}
  </Query>
);

 

 

2. refetchQuries

mutation으로 데이터를 업데이트 한 후 refetch를 하지 않으면 생기는 예시를 적어보았다.

 

예를 들어 A,B,C중에 C를 삭제하면(delete기능을 가진 mutation) 화면은 A,B로 업데이트 되어야 한다.

하지만 refetch를 하지 않으면 화면은 여전히 A,B,C가 있을 것이고, C를 선택하면 C는 없는 내용이기 때문에 에러가 뜰 것이다.

새로고침을 해야만 UI가 업데이트 되어 화면에는 A,B 만 보일 것이다.

 

때문에 delete mutation 직후, 변경된 DB값을 다시 UI에 표시하는 refetch가 필요하다.

 

onCompleted 를 사용하여 refetch() 를 사용할 수 도 있고, 아니면 

 

refetchQuries를 사용할 수 도 있다.

 

예시는 역시 공식문서를 이용한다.

 

// Refetches two queries after mutation completes
const [addTodo, { data, loading, error }] = useMutation(ADD_TODO, {
//ADD mutation이후 다시 전체 데이터를 조회하는 쿼리문을 refetch 한다.
  refetchQueries: [
    GET_POST, // DocumentNode object parsed with gql
    'GetComments' // Query name
  ],
});

 

refetchQuries배열 에서 refetch할 쿼리문은 쿼리문의 이름(ex : GET_POST)으로 사용하기 때문에, query문의 이름은 유니크해야 한다.