onCompleted 내부에서 Apollo Client의 client.refetchQueries 메서드를 사용하여 쿼리를 수동으로 리패치하기

 

onCompleted 함수에서 쿼리를 다시 실행하여 데이터를 리패치하기

// 기존 refetch

const [createDishMutation, { loading }] = useMutation<
  createDish,
  createDishVariables
>(CREATE_DISH_MUTATION, {
  refetchQueries: [
    {
      query: MY_RESTAURANT_QUERY,
      variables: {
        input: {
          id: +restaurantId,
        },
      },
    },
  ],
});

• refetchQueries는 useMutation의 옵션으로 제공되는 기능이다.
• onCompleted는 mutation이 성공적으로 실행된 후 호출되는 콜백 함수이다.

 

 

onCompleted 내부에서 Apollo Client의 client.refetchQueries 메서드를 사용하여 쿼리를 수동으로 리패치하기

// 수동패치 :  Apollo Client의 client.refetchQueries 메서드를 사용

const onCompleted = (data: CreateDishMutation) => {
  const {
    createDish: { ok }
  } = data;

  if (ok) {
    setUploading(false); // 업로드 완료 시 로딩 상태 해제

    // 쿼리를 다시 실행하여 데이터를 리패치
    client.refetchQueries({
      include: [MY_RESTAURANT_QUERY] // 리패치할 쿼리 명시
    });

    client.query({
      query: MY_RESTAURANT_QUERY,
      variables: {
        input: {
          id: +restaurantId // 필요한 변수 추가
        }
      }
    });

    history.goBack(); // 성공 시 페이지 이동
  }
};

const [createDishMutation, { loading }] = useMutation<
  CreateDishMutation,
  CreateDishMutationVariables
>(CREATE_DISH_MUTATION, { onCompleted });

• onCompleted 함수에서 refetchQueries를 직접 호출할 수는 없다.

• 쿼리를 다시 사용하여 refetchQueries를 사용하는 것과 동일한 효과를 얻을 수 있다.